儀表：在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，發現我需要關閉輔助函數，或流星可能抱怨不平衡< \ div>。這似乎有點冒失。

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