Backbone.js многоуровневая ul - PullRequest
Новая
       22

Backbone.js многоуровневая ul

0 голосов
/ 22 февраля 2012

Я начинаю магистральный проект и решил, что начну с системы меню.Мое меню основано на многоуровневой ул.Так что в основном есть вложенные ссылки в некоторые из списков

Мне интересно, как бы я создал модель / коллекцию для этого.И в этом отношении, как бы я сделал вид.Я видел людей, создающих представления с типом тега li.Но я не уверен, как это будет работать.

1 Ответ

0 голосов
/ 22 февраля 2012

Я лично поклонник использования представления коллекции и представления элемента (предотвращает повторную визуализацию всего списка) 

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/

вот так

Я думаю, что это делает код немного легче для чтения

...