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

Question

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

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

按钮.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 模式)链接起来。

如果表被(重新)呈现，则解析它的内容并提取文本。解析表格后，将新创建的按钮动态注入(inject)到 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 中提取内容以动态创建按钮？谢谢。

Answer 1

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

以 Meteoric 方式创建动态按钮:使它们依赖于 react 性资源。例如， session 变量。 (如果需要，您也可以使用仅客户端集合。)

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 变量是一种 react 性资源，所以按钮将自动重新呈现以反射(reflect)更改。