Reactive Meteor Templates and Deps Dependency -- 当另一个模板改变或重新/渲染时更新一个模板答案

【问题标题】：Reactive Meteor Templates and Deps Dependency -- update a template when another changes or is re/renderedReactive Meteor Templates and Deps Dependency -- 当另一个模板改变或重新/渲染时更新一个模板
【发布时间】：2014-10-23 21:53:37
【问题描述】：

问题：Meteor JS 应用有 2 个不同的模板，需要共享一些数据。

它们相互依赖，因为我的目标是从中提取文本（步骤 1），然后在另一个模板中创建动态按钮（步骤 2）。按钮的内容取决于表格。

buttons.html

<template name="buttons">

   {{#each dynamicButtons }}
    <button id="{{ name }}">{{ name }}</button>
  {{/each}}

</template>

我的目标是让 name 属性来自 reactiveTable.html 的内容（见上文，或他们的Github page，包meteor add aslagle:reactive-table。

这些需要动态链接，因为表格会不断重新呈现不同的产品组，这些产品通过Template.reactiveTable 和特定的数据上下文（Pub/Sub 模式）链接起来。

如果表格被（重新）渲染，则解析它的内容并提取文本。解析表格后，将新创建的按钮动态注入 UI。 注意 UI.insert 有两个参数，要插入的对象，然后是位置（渲染它的 DOM 节点）。

Template.reactiveTable.rendered = function () {
    UI.insert( UI.render( Template.buttons ) , $('.reactive-table-filter').get(0) )
};

（每次渲染 reactiveTable 时插入新按钮。）

此代码有效，但存在缺陷，因为我无法从reactiveTable. 获取新呈现的内容如this related question 所示，使用ReactiveDict 包：

Template.buttons.helpers({
  dynamicButtons: function() {
    var words = UI._templateInstance().state.get('words');
    return _.map(words, function(word) {
      return {name: word};
    });
  }
});

Template.buttons.rendered = function() {

  // won't work w/ $('.reactiveTable) since table not rendered yet, BUT  
  // using $('h1') grabs content and successfully rendered dynamicButtons!

  var words = $('h1').map(function() { 
    return $(this).text();             
  });
  this.state.set('words', _.uniq(words));
};

Template.buttons.created = function() {
  this.state = new ReactiveDict;
};

每次重新渲染以动态创建按钮时，如何更改我的选择器以从 Template.reactiveTable 中提取内容？谢谢。

【问题讨论】：

标签： javascript templates meteor

【解决方案1】：

你在那里使用了很多未记录的函数，UI.insert 和 UI.render 这是不好的做法。事实上，刚刚发布的 Meteor 0.9.1 消除了它们。

以 Meteoric 方式创建动态按钮：通过使它们依赖于响应式资源。例如，一个会话变量。（如果需要，您也可以使用仅限客户端的集合。）

Template.reactiveTable.rendered = function () {
  // Get words from wherever that data comes from
  Session.set('buttons', words);
};

Template.buttons.helpers({
  dynamicButtons: function() {
    if (Session.equals('buttons', null))
      return [];
    else
      return _.map(Session.get('buttons'), function(word) {
        return {name: word};
      });
  }
});

每次reactiveTable 被渲染或重新渲染时，buttons Session 变量都会更新。而且由于您的动态按钮依赖于它，并且由于 Session 变量是一种反应性资源，因此按钮将自动重新呈现以反映更改。

【讨论】：