1

こんにちは、ここに私の js ファイルがあります。24 行目の各関数に関するエラー メッセージを表示していますが、何が問題なのかわかりません。console.log パネルでアイテムのリストを表示しようとしていますが、html ページにリストが表示されません。

(function() {

    window.App = {

        Models: {},
        Collections: {},
        Views: {}
    };

    window.template = function(id){
        return _.template( $('#' + id).html() );
    };

App.Models.Task = Backbone.Model.extend({});

App.Collections.Task = Backbone.Collection.extend({
    model: App.Models.Task
});

App.Views.Tasks = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
        this.collection.each( this.addOne, this);

        return this;
    },

    addOne: function(task){
        //creating new child view
        var taskView = new App.Views.Task({ model: task });

        //append to the root element
        this.$el.append(taskView.render().el);
    }
});

App.Views.Task = Backbone.View.extend({
    tagName: 'li',

    template: template('taskTemplate'),

    events: {
        'click .edit': 'editTask'
    },

    editTask: function(){
        alert('you are editing the tas.');
    },

    render: function(){
        var template = this.template( this.model.toJSON() );
        this.$el.html(template);
        return this;
    }

});


var tasksCollection = new App.Views.Task([
{
    title: 'Go to the store',
    priority: 4
},
{
    title: 'Go to the mall',
    priority: 3
},
{
    title: 'get to work',
    priority: 5
}
]);

var tasksView = new App.Views.Tasks({ collection: tasksCollection });

$('.tasks').html(tasksView.render().el);

})();
4

2 に答える 2

1

クラスであるかのように、ビュー インスタンスを作成しています。

App.Views.Tasks = Backbone.View.extend({ /* ... */ });

var tasksCollection = new App.Views.Task([
{
    title: 'Go to the store',
    priority: 4
},
//...

次に、そのビューの別のインスタンスを作成し、tasksCollection実際にコレクションであるかのように渡します。

var tasksView = new App.Views.Tasks({ collection: tasksCollection });

ただし、ビューとコレクションは別のものであり、コレクションだけがeachメソッドを持っています (もちろん、ビューに を追加しない限りeach)。

tasksCollectionとして作成したいApp.Collections.Task：

var tasksCollection = new App.Collections.Task([
{
    title: 'Go to the store',
    priority: 4
},
//...
于 2013-08-15T16:24:30.650 に答える