Javascript 反应式Meteor模板和Deps依赖关系--当另一个模板发生更改或被重新/呈现时更新模板

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

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

按钮.html

<template name="buttons">

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

</template>

（每次呈现reactiveTable时插入新按钮。）

此代码有效，但有缺陷，因为我无法从

reactiveTable中获取新呈现的内容。

如中所示，使用

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提取内容以动态创建按钮？谢谢。

您在其中使用了大量未记录的函数，以及

UI.insert

和

UI.render

，这些都是不好的做法。事实上，刚刚发布的流星0.9.1消除了它们

以快速的方式创建动态按钮：使它们依赖于反应性资源。例如，会话变量。（如果需要，也可以使用仅客户端集合。）

每次呈现或重新呈现

reactiveTable

时，

按钮

会话变量都将更新。由于动态按钮取决于它，而且会话变量是一种反应性资源，因此按钮将自动重新启动以反映更改

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