流星会话设置/强制HTML重新呈现

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 ?

Answer 1

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.