我尝试检测哪个模板包含另一个模板,以使特定模板包含的CSS类不同。我已经问过这个问题了。
建议的解决方案是这样的:
app.html:
<body>
{{> parentTemplate parentContext}}
</body>
<template name="parentTemplate">
{{> childTemplate specialContext}}
{{> childTemplate}}
</template>
<template name="childTemplate">
<div class="{{isSpecialClass}}">
<p>parent name: {{name}}</p>
</div>
</template>
app.js
if (Meteor.isClient) {
Template.body.helpers({
// add some context to the parent do demo how it can be modified
parentContext: {name: 'dave'}
});
Template.parentTemplate.helpers({
specialContext: function () {
// make a copy of the parent data context
var data = _.clone(Template.instance().data || {});
// modify the context to indicate the child is special
data.isSpecial = true;
return data;
}
});
Template.childTemplate.helpers({
isSpecialClass: function () {
// grab the context for this child (note it can be undefined)
var data = Template.instance().data;
if (data && data.isSpecial)
// add the 'awesome' class if this child is special
return 'awesome';
}
});
}
现在的问题是我的
childTemplate
具有parentTemplate
的上下文。我检查了parentTemplate
的数据,它具有字段isSpecial
,只是上下文有误。知道为什么会这样吗?例如,如果我在我的{{title}}
中使用childTemplate
,我将获得父上下文对象的标题,但是我想要childTemplate
的上下文。 最佳答案
我误解了最初的问题。我的回答过于复杂,因为我认为必须保留父上下文。如果您只需要修改子上下文,实际上会容易一些。这是一个工作示例:
app.html
<body>
{{> parentTemplate}}
</body>
<template name="parentTemplate">
{{#each children}}
{{> childTemplate}}
{{/each}}
</template>
<template name="childTemplate">
<div class="{{isSpecialClass}}">
<p>name: {{name}}</p>
</div>
</template>
app.js
if (Meteor.isClient) {
Children = new Mongo.Collection(null);
Meteor.startup(function () {
Children.insert({name: 'joe'});
Children.insert({name: 'bob'});
Children.insert({name: 'sam'});
});
Template.parentTemplate.helpers({
children: function () {
// find all of the children and modify the context as needed
return Children.find().map(function(child, index) {
// modify the child context based on some aspect of the child or index
if ((index == 0) || (child.name == 'bob'))
child.isSpecial = true;
return child;
});
}
});
Template.childTemplate.helpers({
isSpecialClass: function () {
// add the 'awesome' class if this child is special
if (this.isSpecial)
return 'awesome';
}
});
}
在此版本中,仅当子级在列表中的第一个或子级名称为“ bob”时,父级才能找到所有子级,并通过在子级上下文中添加
isSpecial
来修改每个子级。现在,孩子只需要在其类帮助器中检查this.isSpecial
。请让我知道,如果你有任何问题。