Meteor模板:将参数传递到每个子模板,并在子模板帮助器中检索它

时间:2013-08-23 23:48:45

标签: meteor handlebars.js

我试图弄清楚如何将参数传递到每个块中的子模板,并使用子模板中的参数以及子模板帮助器。这是我到目前为止所尝试的:

模板:

<template name="parent">
{{#each nodes }}
{{> child myParam}}
{{/each}}
</template>

<template name="child">
{{ paramName }}
</template>

JS:

Template.parent.nodes = function() { 
//return a list
};
Template.parent.myParam = function() {
return {"paramName" : "paramValue"};
};
Template.child.someOtherHelper = function() {
//How do I get access to the "paramName" parameter?
}

到目前为止,它还没有工作,似乎也在某种程度上弄乱了我的输入节点列表。
谢谢你的帮助。

1 个答案:

答案 0 :(得分:6)

当您使用{{> child myParam}}时,它会调用子模板并将myParam关联为当前模板数据上下文,这意味着您可以在模板中引用{{paramName}}

someOtherHelper中,您可以使用this.paramName来检索"paramValue"。 但是,当您使用{{#each nodes}}{{> child}}{{/each}}时,这意味着您将当前列表项的内容(从LocalCursor或直接从数组项中获取)作为子项的模板数据传递,您可以使用html中的{{field}}或js中的this.field

引用列表项属性

这里发生的是当你调用{{> child myParam}}时,myParam帮助器内容覆盖当前节点项作为模板数据,这就是为什么它会弄乱你的节点列表。

一个快速(脏)技巧就是简单地扩展myParam助手,使其也包含来自{{#each}}块的模板数据。

Template.parent.helpers({
  nodes:function(){
    // simulate typical collection cursor fetch result
    return [{_id:"A"},{_id:"B"},{_id:"C"}];
  },
  myParam:function(){
    // here, this equals the current node item
    // so we _.extend our param with it
    return _.extend({paramName:"paramValue"},this);
  }
});

Template.child.helpers({
  someOtherHelper:function(){
    return "_id : "+this._id+" ; paramName : "+this.paramName;
  }
});

<template name="parent">
  {{#each nodes}}
    {{> child myParam}}
  {{/each}}
</template>

<template name="child">
  {{! this is going to output the same stuff}}
  <div>_id : {{_id}} ; paramName : {{paramName}}</div>
  <div>{{someOtherHelper}}</div>
</template>

根据您正在尝试实现的目标,可能会有更好的方法,但这个方法至少可以完成工作。