重复使用Meteor模板作为包含在不同帮助者

时间:2016-02-23 00:35:25

标签: meteor meteor-blaze spacebars meteor-helper

我想在两个不同的上下文中重新使用Meteor模板作为包含(即使用{{> }})。我知道我可以通过使用{{> templateName data1=foo data2=bar}}传入不同的数据,但是我很难弄清楚如何根据上下文提供不同的帮助器。这是有问题的模板:

<template name="choiceQuestion">
  <div class="choice-grid" data-picks="{{numberOfPicks}}" data-toggle="buttons">
    {{! Provide for the user to make multiple selections from the multiple choice list }}
    {{#if hasMultiplePicks}}
      {{#unless canPickAll}}<span class="help-block text-center">Pick up to {{numberOfPicks}}</span>{{/unless}}
      {{#each choices}}
        <label class="btn btn-default"><input type="checkbox" class="choice" name="{{this}}" autocomplete="off" value="{{this}}" checked="{{isChecked}}"> {{this}}</label>
      {{/each}}
    {{/if}}{{! hasMultiplePicks}}
    {{#if hasSinglePick}}
      {{#each choices}}
        <label class="btn btn-default"><input type="radio" class="choice" name="{{this}}" id="{{this}}" autocomplete="off" value="{{this}}" checked="{{isChecked}}"> {{this}}</label>
      {{/each}}
    {{/if}}{{! hasSinglePick}}
  </div>
</template>

以及我如何重复使用它:

{{> choiceQuestion choices=allInterests picks=4}}

模板的关键组件是一个复选框。在一个上下文中,它永远不会被检查。在另一个实施例中,可以基于用户文档中的字段的内容来检查它。我已将checked={{isChecked}}添加到模板中。我已经读过如果从帮助器返回一个falsey值,它将被省略,这个值应该适用于我的目的。

模板的JS故意有一个isChecked帮助器。我曾希望我可以在父模板上提供一个模板包含在另一个上下文中,以便通过在满足检查条件时返回true来有条件地检查框,但模板不会确认此帮助程序。

这是模板的JS:

Template.choiceQuestion.helpers({
  hasSinglePick: function() {
    return this.picks === 1;
  },
  hasMultiplePicks: function() {
    return this.picks > 1 || !this.picks;
  },
  numberOfPicks: function() {
    return this.picks || this.choices.length;
  },
  canPickAll: function() {
    return !this.picks;
  },
});

和父母的JS:

Template.dashboard.helpers({
  postsCount: function() {
    var count = (Meteor.user().profile.posts||{}).length;
    if (count > 0) {
      return count;
    } else {
      return 0;
    }
  },
  isChecked: function() {
      return (((Meteor.user() || {}).profile || {}).contentWellTags || []).indexOf(this) > -1 ? 'checked' : null;
  }
});

Template.dashboard.events({
  'click .js-your-profile-tab': function(){
    facebookUtils.getPagesAssumeLinked();
  }
});

我也尝试过其他一些方法。我尝试将帮助程序与其他上下文(即{{> templateName data1=foo data2=bar isChecked=isChecked}}一起传递给模板。这种方法有效,但它会立即调用帮助程序。这打破了这些因为我需要使用上下文中的值来确定返回的内容从我的助手。由于函数返回时该值不存在,该函数始终返回undefined。

如果我从这个助手返回一个函数而不是值,然后将帮助器和数据上下文一起传递给模板包含,我会得到更好的结果。事实上,我的控制台日志显示了所需的输出,但我仍然没有得到我期望的复选框。

这就是它的样子。返回功能:

  isChecked: function() {
      var self = this;
      return function() {
          return (((Meteor.user() || {}).profile || {}).contentWellTags || []).indexOf(this) > -1 ? 'checked' : null;
      };
  }

并将其传递给模板:

{{> choiceQuestion choices=allInterests picks=4 isChecked=isChecked}}

是否存在已建立的模式,用于覆盖父级的模板助手,或者包含子模板中缺少的父级助手?我怎样才能做到这一点?

0 个答案:

没有答案