Question

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

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

buttons.html

<template name="buttons">

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

</template>

我的目标是名称属性来自reactiveTable.html的内容（请参阅上文或其Github page，包meteor add aslagle:reactive-table。

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

如果（重新）呈现表，则解析它的内容并提取文本。解析表后，将新创建的按钮动态注入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实际上消除了它们。

以流行方式创建动态按钮：使它们依赖于被动资源。例如，一个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会话变量都会更新。并且因为您的动态按钮取决于它，并且由于会话变量是一个反应性资源，因此按钮将自动重新呈现以反映更改。

Reactive Meteor模板和Deps Dependency - 在另一个更改或重新/渲染时更新模板

1 个答案: