I have a template in which the DOM is changed, and I would like to rerender the template when saving to database. Before Blaze, Meteor would have rerendered the whole template if there was a reactive variable somewhere in the template, but now how can I do this ?
I have a collection of clips set up in an Iron router route :
ClipsController = RouteController.extend({
data: function() {
clips = Clips.find({}, {sort: {created: 1}});
return {clips: clips};
}
});
And a template for clips :
<template name="clips">
{{#each clips}}
{{> clip}}
{{/each}}
</template>
Then, I have a template for clip :
<template name="clip">
<article class="clip" id="{{_id}}">
{{{content}}}
<ul class="tags">
{{#each tags}}
<li><a href="/#{{this}}">#{{this}}</a></li>
{{/each}}
</ul>
</article>
</template>
And a script for this template which changes the DOM and then saves the clip :
Template.clip.events({
'click .edit': function(event, template) {
template.$('.tags li').each(function() {
$(this).text($(this).text().replace(/^#(.*)/, "$1"));
});
},
'click .save': function(event, template) {
var data = {
//...
};
Clips.update({_id: this._id}, data);
// How to rerender the template ?
}
});
I don't believe that Blaze provides any way to rerender the entire template as the point of Blaze is to have fine grained updates.
A quick and dirty way to achieve this might be to use Session, a template helper, and an {{#unless}} block that wraps the whole template and then just set the Session key to true before the update and false after causing everything in the {{#unless}} block to rerender.
Template.clips.noRender = function(){
return Session.get("noRender");
}
Template.clip.events({
'click .edit': function(event, template) {
template.$('.tags li').each(function() {
$(this).text($(this).text().replace(/^#(.*)/, "$1"));
});
},
'click .save': function(event, template) {
var data = {
//...
};
Session.set("noRender", true);
Clips.update({_id: this._id}, data, function(){
Session.set("noRender", false);
});
// How to rerender the template ?
}
});
<template name="clips">
{{#unless noRender}}
{{#each clips}}
{{> clip}}
{{/each}}
{{/unless}}
</template>