meteor - Meteor：使用 Blaze 更新集合后强制重新渲染整个模板

Question

我有一个更改 DOM 的模板，我想在保存到数据库时重新呈现模板。在 Blaze 之前，如果模板中某处有反应变量，Meteor 会重新渲染整个模板，但现在我该怎么做呢？

我在 Iron 路由器路由中设置了一组剪辑：

ClipsController = RouteController.extend({
    data: function() {
      clips = Clips.find({}, {sort: {created: 1}});
      return {clips: clips};
    }
});

还有一个剪辑模板：

<template name="clips">
  {{#each clips}}
    {{> clip}}
  {{/each}}
</template>

然后，我有一个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>

这个模板的脚本会更改 DOM，然后保存剪辑：

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 ?
  }
});

Answer 1

我不相信 Blaze 提供了任何重新渲染整个模板的方法，因为 Blaze 的重点是进行细粒度更新。

实现此目的的一种快速而肮脏的方法可能是使用 Session、一个模板帮助程序和一个包装整个模板的 {{#unless}} 块，然后在更新之前将 Session 键设置为 true 并在导致所有内容后设置为 false {{#unless}} 块重新渲染。

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>

Answer 2

我认为这可能也是流星方式的更好解决方案。

../clips.js

Template.clips.onRendered(function(){

   this.autorun(function(){
     Template.currentData();
   });

});

模板.autorun(runFunc)

您可以使用 onCreated 或 onRendered 回调中的 this.autorun 来响应式更新 DOM 或模板实例。您可以在此回调中使用 Template.currentData() 来访问模板实例的响应式数据上下文。

http://docs.meteor.com/#/full/template_autorun

Answer 3

Blaze 提供了一种简单的方法来执行此操作：

var template = Template.instance();
var parentDom = /*where to put your Template*/;
Blaze.remove(template.view);
Blaze.render(Template.clips, parentDom);

它的作用是删除您的无效模板并将新模板呈现为子模板。 http://docs.meteor.com/#/full/blaze_remove
http://docs.meteor.com/#/full/blaze_render

Answer 4

Iron-router 数据操作是响应式默认值。

   clips = Clips.find({}, {sort: {created: 1}});

替换为

  clips = Clips.find({}, {sort: {created: 1}}).fetch();

Answer 5

我认为更好的方法是使用Tracker.afterFlush.

例如：

Tracker.autorun ->
    Tracker.afterFlush ->
        # DOM is updated, why don't you do something here?