设置Meteor JS Helper的返回值,将其动态注入模板
编辑:
鉴于下面的答案,使用Meteor Deps似乎是理想的游戏,因为我想在两个不同的模板之间共享数据,它应该对发生的任何变化都有反应。
澄清一下:我的数据来源是Template.reactiveTable
,目的地是Template.buttons
。 当reactiveTable
的数据发生变化时,我希望按钮能够反映这一点。
结束编辑
我希望根据表的内容(特别是
值)设置buttons
的值。
buttons.html:
{{#each testButtons }} {{/each}}
使用这种硬编码,它按预期工作(两个按钮呈现标记为Alice和Bob
UI.registerHelper('testButtons', function () { return [ { name: "Alice" }, { name: "Bob" } ] } )
模板很乐意接受并呈现此对象数组 。 但是,当我动态生成对象数组时。
目标:对于我的h1标签中包含的每个唯一单词,生成一个按钮(几乎像博客标签)。
通过下面的代码片段替换我的助手代码(使用jquery解析
标签,生成数组以发送到模板)。
假设html是:
foo
bar
baz
然后在控制台中运行以下片段,将创建uniqStrings = [ "foo", "bar", "baz"];
如预期的。
$( 'h1' ).map(function () { var words = []; words.push($(this).text()); uniqStrings = _.uniq(words); });
然后我如何将uniqStrings
发送回我的按钮模板以呈现n= uniqStrings.length
按钮? 谢谢!
假设这个html:
Alice
Bob
{{> buttons}} {{#each testButtons }} {{/each}}
您可以使用此实现:
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的post。
由于buttons
模板使用范围react native,因此可以在任何页面上使用多次,而无需修改父模板。
虽然我并不完全清楚为什么你要解析一个表的内容然后在另一个表中呈现它(这是你想要做的,不是吗?),基本原理如下:
当其任何反应依赖项发生更改时,您的模板将重新呈现。 这意味着您需要:
- 将所讨论的数组存储在一个被设计反应的结构中(所以最小的 ,即客户端数据库),或者一个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
内容。