Question

我试图找出使用Backbone视图和模板构建以下内容的最佳方法。我们有一组“消息”，但消息可能有不同的类型，每个消息都有自己的视图。因此，底层集合可能如下所示：

{ 
  { 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>

这里没有寻找完整的解决方案 - 希望有一个例子可以指示我。

谢谢！

Answer 1

看一下Backbone.Marionette，它提供View“子类”，专门用于处理这样的收集方案。 http://marionettejs.com/

Answer 2

这就是我最终要做的事情 - 基本上使用约定优于配置方法（对于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'
});

Backbone重复使用不同类型的模板

2 个答案: