更新

Question

初始化视图时，如何将模型绑定到创建的特定视图？视图在应用程序启动时进行了当前初始化。另外，如何将模型绑定到集合？（function（$）{//在dom加载

//Creation, Edit, Deletion, Date
var Note = Backbone.Model.extend({
    defaults: {
        text: "write here...",
        done: false
    },

    initialize: function (){
        if(!this.get("text")){
            this.set({"text": this.default.text});
        }
    },

    edit: function (){
        this.save({done: !this.get("done")});
    },

    clear: function (){
        this.destroy();
    }
});

var NoteList = Backbone.Collection.extend({
    model:Note
});

var NoteView = Backbone.View.extend ({
    el: "body",

    initialize: function(){
        alert("initialized");
        var list = new NoteList;    
        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;
        this.push(note);
        alert("noted");
    }
});

var ninja = new NoteView;

}）（jQuery的）;

Answer 1

更新

我刚刚看了@James Woodruff的回答，这促使我再看看你的代码。我第一次看得不够密切，但我仍然不确定你在问什么。如果您正在询问如何让模型或视图监听并处理在另一方上触发的事件，那么请查看James调用bind()以使视图监听change（或{{1}的示例模型上的事件（虽然我建议使用change:attr代替on()，具体取决于您使用的Backbone的版本。

但是基于再次查看你的代码，我已经修改了我的答案，因为我看到你试图以一些没有意义的方式做的事情，所以也许这就是你所要求的。 / p>

新答案

以下是您问题中的代码，我添加了评论：

bind()

以下是您的代码的修订版本，其中包含对我评论的内容的更改：

var NoteView = Backbone.View.extend ({

    // JMM: This doesn't make sense. You wouldn't normally pass `el`
    // to extend(). I think what you really mean here is
    // passing el : $( "body" )[0] to your constructor when you
    // instantiate the view, as there can only be one BODY element.

    el: "body",

    initialize: function(){
        alert("initialized");

        // JMM: the next 2 lines of code won't accomplish anything.
        // Your NoteList object will just disappear into thin air.
        // Probably what you want is one of the following:
        // this.collection = new NoteList;
        // this.list = new NoteList;
        // this.options.list = new NoteList;

        var list = new NoteList;    

        // Returning something from initialize() won't normally
        // have any effect.        

        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;

        // JMM: the way you have your code setup, `this` will be
        // your view object when createNote() is called. Depending
        // what variable you store the NoteList object in (see above),
        // you want something here like:
        // this.collection.push( note ).

        this.push(note);
        alert("noted");
    }
});

Answer 2

您必须将视图绑定到模型，因此当模型更新[触发事件]时，绑定到模型的所有相应视图也会更新。集合是类似模型的容器...例如：Comments Collection包含Comment类型的模型。

为了将视图绑定到模型，它们都必须实例化。例如：

var Note = Backbone.Model.extend({

    defaults: {
       text: "write here..."
    },

    initialize: function(){

    },

    // More code here...

});


var NoteView = Backbone.View.extend({

    initialize: function(){
       // Listen for a change in the model's text attribute
       // and render the change in the DOM.
       this.model.bind("change:text", this.render, this);
    },


    render: function(){
       // Render the note in the DOM
       // This is called anytime a 'Change' event
       // from the model is fired.
       return this;
    },

    // More code here...

});

现在收集了。

var NoteList = Backbone.Collection.extend({

    model: Note,

    // More code here...

});

现在是时候实例化一切了。

var Collection_NoteList = new NoteList();
var Model_Note = new Note();
var View_Note = new NoteView({el: $("Some Element"), model: Model_Note});

// Now add the model to the collection
Collection_NoteList.add(Model_Note);

我希望这可以回答你的问题，或者引导你朝着正确的方向前进。

如何将模型绑定到视图？

2 个答案:

更新

新答案