Mustacheのハッシュ値に基づいてテンプレートの部分を切り替えることはできますか？

Question

私はMustache.jsのグリップを取得して、JavaScriptのビューをレンダリングしようとしています。私はいくつかの異なるタイプであることができるいくつかの "イベント"を返すAPIを持っています。 、私はこのような何か行うことができます理想的

data : { 
    events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ] } 

：私はそのタイプに基づいて、（非常に）さまざまな方法でイベントレンダリングする

{{#events}} 
    {{#message}} 
     <div class="message">{{title}}</div> 
    {{/message}} 
    {{#image}} 
     <span>{{title}}</span> 
    {{/image}} 
{{/events}} 

をしかし、それは（右？）私を強制します私のデータをリファクタリングする：

data : { 
    events: [ {message: {title: 'hello'}}, {image: {title: 'world'}} ] } 

私のデータをリファクタリングせずにこれを解決するより良い方法がありますか？または、私は弾丸を噛むべきですか？

Answer 1

口ひげは論理がないので、Handlebarsに切り替える以外の純粋なテンプレートコードではあまりできません。

ヒントを宣言し、それを使ってレンダリングするテンプレートを選択することができます。それは少し複雑取得しますが、あなたはそれはあなたが変更することはできません何かあれば離れ口ひげからの切り替えを避けることができます。

var base_template = '{{#events}}' + 
         '{{{event_renderer}}}' + 
        '{{/events}}'; 
var message_template = '<div>message: {{title}}</div>'; 
var image_template = '<div>image: {{title}}</div>'; 
var data = { 
    events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ], 
    event_renderer: function() { 
     return Mustache.render('{{> ' + this.type + '}}', this, {message: message_template, image: image_template}); 
    } 
} 

Mustache.render(base_template, data); 

ここにトリックはあなたのようにイテレータになりますベースのテンプレートを作成し、event_rendererに渡すということですヘルパー。そのヘルパーはまた、Mustache.renderを呼び出して、パーシャルを使用して、それぞれのタイプのイベントをレンダリングします（これは{{>部分}}表記です）。

この厄介な部分は、このevent_rendererメンバーをJSONデータに追加する必要があるということですが、それ以外はすべてうまくいくはずです（ハンドルバーではヘルパーとして宣言でき、マージする必要はありませんあなたのデータと一緒に）。