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

Question

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

私はMustache.jsのグリップを取得して、JavaScriptのビューをレンダリングしようとしています。私はいくつかの異なるタイプであることができるいくつかの "イベント"を返すAPIを持っています。私は、その型に基づいて（非常に）異なる方法でイベントをレンダリングしたいと思います：

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

理想的には、私は次のようなことをすることができます：

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

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

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

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

4

追加された 06 2月 2012 〜で 03:58 著者 Arvid Janson

ビュー: 3

源

ru fr es pt de ar

1 答え

score 2 · Answer 1 · 2012-02-06T07:10Z

Mustacheはロジックがないので、 Handlebars 。

あなたの親切に優しい選択肢は、ヘルパーを宣言し、それを使ってレンダリングするテンプレートを選択することです。それはちょっと複雑になりますが、あなたが変更できないものなら、Mustacheから切り替えるのを避けることができます：

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

The trick here is that you create a base template that will be the iterator, and pass in event_renderer as a helper. That helper will in turn call Mustache.render again, using partials to render each type of event you can have (that's the {{> partial}} notation).

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