使用Backbone呈现嵌套集合.木偶和脊梁，关系

Question

我正在尝试用Backbone.js制作一个简单的日历/待办事项列表。

我有一个日子的集合，每个日子可以有多个todo。我想将每个日期呈现为一个无序列表，其中包含一个无序的待办事项列表。这是我的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到目前为止(我有主干，主干。木偶和脊梁。(包含在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集合显示良好(感谢木偶!)，但我不知道我应该如何渲染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();
    }
});

它确实在正确的日期下正确地呈现每个todo，但是使用jquery find和toJSON是一种代码气味。

Answer 1

木偶有一个复合视图，最适合嵌套集合。我已经包含了文档和一篇讨论如何使用它的文章。

木偶合成视图文档

木偶合成视图文章