Meteor session set/get forcing html to re-render

Question

I have a page running with Meteor.js only running on the client. I'm using iron-router for setting up the page URL. I have this in the before section to set a session variable:

    before: function () {
        Session.set('employee-number', 0);
}

The html has a section with a text box

<div class="row-fluid employee-gift-main">
    <div class="span4">
        <label>
            <span># Employees</span>
            <input type="text" size="4" data-stripe="employee-text" class="employee-gift input-block-level" id="employee" placeholder="xx"/>
        </label>
    </div>
</div>

And the js file has a keypress event:

'keyup .employee-gift': function(event, template) {
     if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode != 27 && event.keyCode != 13 && event.keyCode != 10 && event.keyCode != 8)) {
         $("#employee").val($("#employee").val().substring(0,$("#employee").val().length - 1));
    }
    else if (event.keyCode >= 48 || event.keyCode <= 57) {
        Session.set('employee-number',$("#employee").val());
    }
}

Now, when I set the session variable, it changes some values on some pricing like calculating fees and taxes:

sponsorFeeTotal: function() {
    var adminFee = 0;
    if(Session.get('firstTime'))
        adminFee = 45*0.13;

    if( Session.get('employee-number') == '')
        return (Session.get('sponsorFee')+adminFee+parseFloat(Session.get('getTax'))).toFixed(2);
    else    
        return (Session.get('sponsorFee')+parseInt(Session.get('employee-number'))*20*0.13+parseInt(Session.get('employee-number'))*20+adminFee+parseFloat(Session.get('getTax'))).toFixed(2);
},

geTax :function() {
    var adminFee = 0;
    if(Session.get('firstTime'))
        adminFee = 45*0.13;
    if( Session.get('employee-number') == '')
        return (Session.get('getTax')+adminFee).toFixed(2);
    else
        return (Session.get('getTax')+adminFee+parseInt(Session.get('employee-number'))*20*0.13).toFixed(2);
},

employeeNumber: function() {
    return parseInt(Session.get('employee-number'));
},
employeeNumberValue: function() {
    return parseInt(Session.get('employee-number'))*20;
}

The get methods then force all the text inputs including the #employee field to be re-loaded. I understand that meteor UI automatically re-renders the parts that depend on a specific key (employee-number) if that key changes. However, this code was working fine with a previous version of meteor. Has the behaviour changed recently and how do I fix this issue ?

Jeremy S. Jeremy S. · Accepted Answer · 2014-05-15T03:34:33

Your input#employee is not going to be re-rendered by changing Session.get('employee-number') because it does not depend on that or any other Session value. My guess is that you were previously relying on something higher up the DOM triggering a re-rendering of the entire template when Session.get('employee-number') changed.

That is a major change in Meteor 0.8+ - a change in a reactive data source will not automatically trigger re-rendering of an entire template, but only those specific elements that depend on the data source. So input#employee is not being re-rendered.

I would read here for more information on this change.

Also, as a side note, Iron Router's 'before' hook is being deprecated in favor of 'onBeforeAction'. This is likely not the source of your question because 'before' will be supported through Meteor 1.0 (see here). Just wanted to point it out for future-proofing.

Meteor session set/get forcing html to re-render

1 Answers