Рендеринг вложенных коллекций с использованием Backbone.Marionette и Backbone.Relational

Я пытаюсь сделать простой календарь/список дел с помощью Backbone.js.

У меня есть коллекция дней, каждый из которых может иметь несколько задач. Я хотел бы отображать каждую дату в неупорядоченный список, содержащий неупорядоченный список задач. Вот мой HTML:

<ul id="days-list">
    <!-- #day-tpl -->
</ul>

<script id="day-tpl" type="tpl">
    <h1>To-do for {{name}}</h1>
    <ul class="todos-list">
        <!-- todo-tpl -->
    </ul>
</script>

<script id="todo-tpl" type="tpl">
    {{title}}
</script>

И вот мой JS на данный момент (у меня есть Backbone, Backbone.Marionette и Backbone.Relational, включенные в HTML).

Todo = Backbone.RelationalModel.extend({});

Todos = Backbone.Collection.extend({
    model: Todo,
    idAttribute: 'id_todo'
});

Day = Backbone.RelationalModel.extend({
    relations:[{
        type: Backbone.HasMany,
        key: 'todos',
        relatedModel: 'Todo',
        collectionType: 'Todos',
        reverseRelation:{
            key: 'day',
            includeInJSON: 'id'
        }
    }]
});

Days = Backbone.Collection.extend({
    model: Day
});

TodoView = Backbone.Marionette.ItemView.extend({
    tagName: 'li',
    template: '#todo-tpl'
});

TodosView = Backbone.Marionette.CollectionView.extend({
    itemView: TodoView
});

DayView = Backbone.Marionette.ItemView.extend({
    tagName: 'li',
    template: '#day-tpl'
});

DaysView = Backbone.Marionette.CollectionView.extend({
    el: $('#days-list'),
    itemView: DayView
});

$(document).ready(function(){
    var days = new Days([
        {
            "id": 1,
            "name": "Monday",
            "todos": [
                {
                    "id_todo": 1,
                    "title": "Learn Javascript"
                },
                {
                    "id_todo": 2,
                    "title": "Learn Node.js"
                }
            ]
        },
        {
            "id": 2,
            "name": "Tuesday",
            "todos": [
                {
                    "id_todo": 3,
                    "title": "Learn Backbone"
                },
                {
                    "id_todo": 4,
                    "title": "Learn Backbone.Marionette"
                }
            ]
        }
    ]);

    var daysView = new DaysView({collection: days});
    daysView.render();
});

Коллекция Day отображается нормально (спасибо Marionette!), но я не знаю, как я должен отображать коллекции Todo для каждого дня. Есть идеи ? Спасибо !

РЕДАКТИРОВАТЬ: я нашел способ, но я не уверен, что это правильный способ сделать это.

Я отредактировал свой DayView следующим образом:

DayView = Backbone.Marionette.ItemView.extend({
    tagName: 'li',
    template: '#day-tpl',
    onRender: function(){
        var $todosList = this.$el.find('.todos-list');
        var todos = new Todos(this.model.get('todos').toJSON());
        var todosView = new TodosView({collection: todos, el: $todosList});
        todosView.render();
    }
});

Он правильно отображает каждую задачу в нужный день, но использование jquery find и toJSON — это запах кода.


person Lukmo    schedule 13.03.2013    source источник


Ответы (1)


В Marionette есть CompositeView, который лучше всего работает с вложенными коллекциями. Я включил документацию и статью, в которой обсуждается ее использование.

документация Marionette CompositeView

статья Marionette CompositeView

person Kalpers    schedule 14.03.2013