0

我正在尝试找出使用 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>

不是在这里寻找完整的解决方案 - 只是希望有人可以指出一个例子。

谢谢！

4

2 回答 2

1

查看 Backbone.Marionette，它提供了专门用于处理此类收集场景的视图“子类”。 http://marionettejs.com/

于 2013-09-04T00:35:00.157 回答
0

这就是我最终做的事情——本质上是使用约定优于配置的方法（向 Robert Levy 致敬 Marionette——不确定这是否也不适用于直骨干，但我认为 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 回答