javascript - childTemplate 中的 ParentContext - Meteor

标签 javascript meteor

我尝试检测哪个模板包含另一个模板,以便为特定模板包含项提供不同的 css 类。我已经问过这个问题here .

建议的解决方案是这样的:

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,它只是有错误的上下文。知道为什么会发生这种情况吗?例如,如果我在 childTemplate 中使用 {{title}},我将获得父上下文对象的标题,但我想要 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';
    }
  });
}

在此版本中,父级查找所有子级,并通过将 isSpecial 添加到子级上下文(如果子级位于列表中的第一个或如果这个 child 的名字是“鲍勃”。现在,子级只需要在其类帮助器中检查 this.isSpecial 。如果您有任何疑问,请告诉我。

关于javascript - childTemplate 中的 ParentContext - Meteor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26843042/

相关文章:

javascript - 在哪里使用 name/Id 使用 javascript 从 html 获取数据

javascript - 将 PATH 从 SVG 转换为 POLYLINE

javascript - 如何通过将现有的 json 结构与新的合并来修改它

javascript - Meteor 错误调用方法 ['questions.insert]: Method ' questions.insert' 未找到

javascript - Meteor Template 助手和 Handlebars 助手之间有什么区别?

css - 使用 Meteor 的 Bootstrap 示例

javascript - 我想删除 javascript/jquery 中的小数点

javascript - 如果其他参数匹配,则对数组中的参数求和

performance - meteor :帐户登录链接需要时间来加载

javascript - Tracker.autorun() 不会在 ReactiveVar 的每次更新时运行