Backbone.js 多级ul

Question

我正在开始一个骨干项目，我想我应该从菜单系统开始。 我的菜单基于多级 ul。所以基本上在一些 li 的侧面有嵌套的 ul，

我想知道如何为此创建一个模型/集合。就此而言，我将如何进行视图。我见过人们使用 li 标签类型创建视图。但我不确定这会如何运作。

Answer 1

我个人很喜欢使用集合视图和项目视图（防止重新渲染整个列表），

AutoFiler.Views.Messages = Backbone.View.extend({
initialize: function () {
    _.bindAll(this, 'render', 'renderItem');
    this.collection.bind("reset", this.render);
    this.collection.bind('add', this.renderItem);
    this.collection.bind('remove', this.render);
},
render: function () {
    this.el.empty();
    this.collection.each(this.renderItem);
    return this;
},
renderItem: function (item) {
    var viewC = new AutoFiler.Views.Message({ model: item });
    this.el.append(viewC.render().el);
}
});
AutoFiler.Views.Message = Backbone.View.extend({
   template: _.template($("#Message-template").html()),
   tagName: "li",
   initialize: function () {
      _.bindAll(this, 'render');
   },
   render: function () {
     $(this.el).html(this.template(this.model.toJSON()));
     return this;
   }
});

<script id="Message-template" type="text/template">
    <div>{{ Subject }}</div>
</script>

<ul id="Messages"> 

</ul>

您

<ul id="Messages"> 
    <li><div>Subject A</div></li>
    <li><div>Subject B</div></li>
</ul>

可以通过创建列表集合（集合的集合）来嵌套，

或者您可以只使用类名和样式 深度

http://jsfiddle.net/3HGuf/

像这样的

我认为这使代码更容易阅读