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

Question

编辑：

给定以下答案，使用Meteor Deps似乎是理想的游戏，因为我想在两个不同的模板之间共享数据，并且它应该对发生的任何变化都具有反应性。

需要说明的是：我的数据源是Template.reactiveTable ，目的地是Template.buttons 。 当数据在reactiveTable的变化，我想按钮来反映这一点。

结束编辑

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

button.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运行并将正确格式的数据返回到您的模板。 请参阅我关于范围反应性的文章以了解更多详细信息。

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

Answer 2

虽然我不清楚您为什么要尝试解析一个表的内容，然后将其呈现到另一个表中（这是您要执行的，不是吗？），但是基本原理如下：

当模板的任何反应性依赖项发生更改时，模板将重新呈现。 因此，这意味着您需要：

将所讨论的数组存储在一个可以通过设计进行响应的结构中（因此可以是minimongo ，即客户端数据库），也可以是Session变量。
使用单独的（反应性）变量，该变量仅告诉模板需要在正确的时间重新呈现。

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

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 个解决方案

解决方案1
2 已采纳 2014-08-28 14:30:03

解决方案2
1 2014-08-28 14:29:55

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-08-28 14:30:03

解决方案2 1 2014-08-28 14:29:55

解决方案1
2 已采纳 2014-08-28 14:30:03

解决方案2
1 2014-08-28 14:29:55