我尝试检测哪个模板包含另一个模板,以使特定模板包含的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。请让我知道,如果你有任何问题。

09-11 07:15