0

バックボーン ビューとテンプレートを使用して、以下を構成する最善の方法を見つけようとしています。「メッセージ」のコレクションがありますが、メッセージは異なるタイプで、それぞれ独自のビューを持つ場合があります。したがって、基になるコレクションは次のようになります。

{ 
  { id: 1, name="message one", type="customer-message" },
  { id: 2, name="message two", type="support-message" },
  { id: 3, name="attachment one", type="attachment" }
}

結果のページ出力は次のようになります。

<ul>
  <li class="message customer-message"></li>
  <li class="message support-message"></li>
  <li class="message attachment"></li>
</ul>

それぞれの異なるliクラスは、まったく異なる構造/コンテンツを持つようになります。

私が理解しようとしているのは、テンプレートとビューを設定して、a) ネストを処理し、b) タイプによって内部テンプレートが異なるという事実を処理する方法です。

<script type="text/template" id="chat-template">
  <ul>
    <!--how to reference other templates here?-->
  </ul>
</script>

<script type="text/template" id="customer-message-template">
</script>
<script type="text/template" id="support-message-template">
</script>
<script type="text/template" id="attachment-template">
</script>

ここで完全な解決策を探しているわけではありません - 誰かが私に指摘できる例があることを願っています.

ありがとう！

4

2 に答える 2

0

これが私が最終的に行ったことです-基本的に、構成アプローチよりも規則を使用します（MarionetteのRobert Levyへのハットチップ-これがストレートバックボーンでも機能しないかどうかはわかりませんが、MarionetteのCollectionViewはこれを簡単にすると思います）：

MyApp.MessageView = Backbone.Marionette.ItemView.extend({
    tagName: 'li',
    getTemplate: function() {
        var type = this.model.get("type");
        return "#" + type + "-template";
    }
});

MyApp.MessageCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: MyApp.MessageView,
    tagName: 'ul'
});
于 2013-09-04T20:27:57.027 に答える