Backbone.js多级ul

Question

我正在开始一个主干项目，我想我应该从菜单系统开始。我的菜单是基于多级用户界面的。因此，基本上在清单的某些侧面有嵌套的uls

我想知道如何为它创建一个模型/集合。就这一点而言，我将如何处理视图。我见过人们创建带有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/

就像这样

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