Meter：在 Blaze 中嵌入模板答案

【问题标题】：Meter: embedding templates in BlazeMeter：在 Blaze 中嵌入模板
【发布时间】：2015-12-21 07:25:17
【问题描述】：

使用 Bootstrap 和 Meteor / Blaze，我正在尝试使用模板助手动态控制模板的大小。我想要一个在 col-md-4 和 col-md-12 之间切换的按钮。硬编码的列大小如下所示：

<div class="panel-body">
  <div class="row">
   {{#each articles}}
      <div class="col-md-4">
         {{> article this}}
      </div>
   {{/each}}
 </div>

我有一个返回 div 的模板助手，发现我需要一个结束助手调用，否则 Meteor 可能会抱怨不平衡的。这似乎有点hacky。

Template.articles.helpers({
  format: function() {
      return '<div class="col-md-4">';
      // return '<div class="col-md-12">';
  },
  end_format: function() {
      return '</div>'
  }
});

标记是：

<div class="panel-body">
  <div class="row">
      {{#each articles}}
          {{{format}}}
              {{> article this}}
          {{{end_format}}}
      {{/each}}
   </div>
</div>

但是 div 标记返回封闭和空，我想要的标记包含在下面，如此屏幕截图所示：

【问题讨论】：

标签： meteor meteor-blaze

【解决方案1】：

不要从模板助手返回 HTML，通常有更好的方法。

为什么不从模板助手返回动态类名？

HTML

<div class="panel-body">
  <div class="row">
    {{#each articles}}
      <div class="{{columnSize}}">
        {{> article this}}
      </div>
    {{/each}}
  </div>
  <button type="button" class="btn btn-primary js-toggle-column-size">Toggle column size</button>
</div>

ES2015

Template.articles.onCreated(function(){
  this.largeColumns = new ReactiveVar(false);
});

Template.articles.helpers({
  columnSize(){
    const largeColumns = Template.instance().largeColumns.get();
    return largeColumns ? 'col-md-12' : 'col-md-4';
  }
});

Template.articles.events({
  'click .js-toggle-column-size'(event, template){
    const largeColumns = template.largeColumns.get();
    template.largeColumns.set(!largeColumns);
  }
});

【讨论】：