1

Backbone.js を使用して簡単なカレンダー/todo リストを作成しようとしています。

それぞれが複数の Todo を持つことができる日のコレクションがあります。各日付を、順序付けされていない 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にはBackbone、Backbone.Marionette、およびBackbone.Relationalが含まれています）。

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();
    }
});

各 todo を適切な日に正しくレンダリングしますが、jquery find と toJSON の使用はコードのにおいがします。

4

1 に答える 1

2

Marionette には、ネストされたコレクションで最適に機能する CompositeView があります。ドキュメントと、その使用方法について説明した記事を含めました。

Marionette CompositeView ドキ​​ュメント

マリオネットコンポジット記事を見る

于 2013-03-14T11:42:56.850 に答える