仪表：在Blaze中嵌入模板

Question

使用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可能会抱怨不平衡＆lt; \ div＆gt; 。这看起来有点笨拙。

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 标签返回已关闭且为空，我想将标记包含在下方，如此屏幕截图所示：

Answer 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);
  }
});