Question

编辑：

鉴于下面的答案，使用Meteor Deps似乎是理想的游戏，因为我想在两个不同的模板之间共享数据，并且应该对发生的任何更改做出反应。

澄清一下：我的数据来源为Template.reactiveTable，目的地为Template.buttons。当reactiveTable中的数据发生变化时，我希望按钮能够反映这一点。

结束编辑

我希望根据表格的内容（特别是buttons值）设置<h1>的值。

buttons.html：

  <template name="buttons">
    {{#each testButtons }}
       <button id="{{ name }}">{{ name }}</button>
    {{/each}}
  </template>

使用此硬编码，它按预期工作（两个按钮呈现为Alice和Bob

UI.registerHelper('testButtons', function () {
        return [ 
          { name: "Alice" }, 
          { name: "Bob" } 
        ]
    }
)

模板很乐意接受并呈现此对象数组。但是，当我动态生成对象数组时。

对于我的h1标签中包含的每个唯一字，

目标，生成一个按钮（几乎就像博客标签一样）。

通过下面的代码片段替换我的助手代码（使用jquery解析<h1>标签，生成要发送到模板的数组）。

假设html是：

  <h1>foo</h1>
  <h1>bar</h1>
  <h1>baz</h1>

然后在控制台中运行以下代码段，将根据需要创建uniqStrings = [ "foo", "bar", "baz"];。

$( 'h1' ).map(function () {
  var words = [];
  words.push($(this).text());
  uniqStrings = _.uniq(words);

});

如何将uniqStrings发送回我的按钮模板以呈现n= uniqStrings.length按钮？谢谢！

Answer 1

假设这个html：

<body>
  <h1>Alice</h1>
  <h1>Bob</h1>
  {{> buttons}}
</body>

<template name="buttons">
  {{#each testButtons }}
    <button id="{{ name }}">{{ name }}</button>
  {{/each}}
</template>

您可以使用此实现：

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

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

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

请注意，您需要执行以下操作：meteor add reactive-dict

创建buttons模板时，初始化自己的内部无功状态。呈现后，它会使用页面上所有h1标记中的文本填充该状态。由于该状态是被动的，因此它将导致testButtons运行并将正确格式化的数据返回到模板。有关详细信息，请参阅Scoped Reactivity上的帖子。

由于buttons模板使用范围反应性，因此可以在任何页面上多次使用它，而无需修改父模板。

Answer 2

虽然我并不完全清楚你为什么要尝试解析表格的内容然后在另一张桌子上呈现它（这是你正在尝试做的事情，不是＆＃ 39;是吗？），基本原则如下：

当任何反应依赖项发生变化时，您的模板将会重新呈现。这意味着您需要：

将有问题的数组存储在一个被设计反应的结构中（所以minimongo，即客户端数据库），或者Session variable。
使用一个单独的（被动）变量，它只是告诉模板需要在正确的时间重新渲染。

从应用程序结构的角度来看，后者可能不太好，但最容易举例说明：

var renderDep = new Deps.Dependency(),
    words = [];

UI.registerHelper('testButtons', function () {
    renderDep.depend();
    return words;
});

然后每当你打电话时：

$( 'h1' ).map(function () {
    words = [];
    words.push($(this).text());
    uniqStrings = _.uniq(words);       
});

请务必致电：

renderDep.changed();

之后，其所有依赖项（即模板助手）将重新运行并返回新的words内容。

设置Meteor JS Helper的返回值，将其动态注入模板

2 个答案: