CODEWITHSUNDEEP
meteor
user2266659
user2266659

Reputation: 41

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

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.

If they click 'OK' I create the project and redirect to /project/[new project id] using Meteor.Router.

However, just before the redirect, I see the new project name automatically to the user's list of projects.

I want to avoid this unnecessary re-rendering, which causes a brief flash of updated content.

Is there a way to prevent the template for my list of projects from re-rendering?

Upvotes: 3

Views: 3449

Answers (2)

user24831
user24831

Reputation: 11

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.

Upvotes: 0

Tarang
Tarang

Reputation: 75945

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.

Upvotes: 4

Related Questions