Meteor.js - temporarily prevent a template from re-rendering (disable reactivity)

Question

I have a page in my app with a list of Projects the user is working on.

When they want to add a new project, I show a modal form to get the name of the project.

Answer 1

You can put your html containing this into a {{#constant}} block. Docs on constant

e.g

{{#constant}}
    {{#each ...}}
    ....
    {{/each}}
{{/constant}}

Another option is to disable reactivity in your template helper e.g if you have

Template.home.mydata = function() { return MyCollection.find() }

change this to use reactive:false as an option

Template.home.mydata = function() { return MyCollection.find({}, {reactive:false}) }

This way the initial changes are shown but any updates aren't used so there wouldn't be a re-render.

Answer 2

I have found that using cancel inside the event handler after the call to the methods cancels the chain of reactivity.

Template.questionTeaser.events({
  "click .vote_add": function(event, template){
    Meteor.call('vote_add', this._id, this.session)

    // This cancels the chain of reactivity.
    return false
  },
})

I use it for the following use case:

Users sees a list of questions sorted by votes User can upvote After upvote the list gets rerendered/sorted BUT with a countdown in the rightside of the page so the user knows he cant click for a second.