0

口ひげスクリプトといくつかのパーシャルから HTML をレンダリングしている場合、レンダリングされるデータに応じて使用するパーシャルを選択できますか?

例えば：

data = {"posts": [
  {"type":"text", "body":"I'm text"},
  {"type":"image", "uri":"http://placekitten.com/200/300"}
]}

次のような基本テンプレートを使用します。

<ul class="posts">
  <li>
  {{#posts}}
    {{> {{type}}}}
  {{/posts}}
  </li>
</ul>

次にtext.mustache：

<p>{{body}}</p>

そしてimage.mustache：

<img src="{{uri}}" />

そして、これは次のようにレンダリングされます。

<ul class="posts">
  <li>
    <p>I'm text</p>
  </li>
  <li>
    <img src="http://placekitten.com/200/300" />
  </li>
</ul>

ここで何か不足していますか？私はこれを試みる必要がありますか？

4

1 に答える 1

1

ここであなたが求めていることは、行の「論理」側に降りかかるものであり、Mustache が回避しようとしているものです。それを行う方法がないというわけではありませんが、おそらくあなたが考える方法ではないでしょう:)

Mustache では、より高度な使用法の多くに対する正しい答えは、「ビューを準備する」です。これも例外ではありません。私はおそらく次のようにします：

function addHelpers(posts) {
    for (var i = 0, l = posts.length; i < l; i++) {
        posts[i].isText  = posts[i].type === 'text';
        posts[i].isImage = posts[i].type === 'image';
        posts[i].isVideo = posts[i].type === 'video';
    }
    return posts;
}

data = {"posts": [
  {"type":"text", "body":"I'm text"},
  {"type":"image", "uri":"http://placekitten.com/200/300"}
]}

data.posts = addHelpers(data.posts);

次に、基本テンプレートは次のようになります。

<ul class="posts">
  {{# posts }}
    <li>
      {{# isText  }}{{> text  }}{{/ isText  }}
      {{# isImage }}{{> image }}{{/ isImage }}
      {{# isVideo }}{{> video }}{{/ isVideo }}
    </li>
  {{/ posts }}
</ul>
于 2013-03-12T21:17:31.970 に答える