Question

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

我有一个可以分别拥有多个Todos的Days系列。我想将每个日期呈现为一个无序列表，其中包含一个无序的待办事项列表。这是我的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是代码气味。

Answer 1

Marionette有一个最适合嵌套集合的CompositeView。我已经包含了文档和讨论使用它的文章。

Marionette CompositeView documentation

Marionette CompositeView Article

使用Backbone.Marionette和Backbone.Relational渲染嵌套集合

1 个答案: