Backbone.js 如何将模型绑定到视图？

初始化视图时，如何将模型绑定到所创建的特定视图？视图在应用程序开始时是当前初始化的。另外，如何将模型绑定到集合？ （函数（$）{//在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）

更新 我只是看了一下@James Woodruff的答案，这促使我再看一眼你的代码。我第一次看得不够仔细，但我还是不确定你在问什么。如果您询问如何让模型或视图侦听和处理在另一个模型或视图上触发的事件，请查看James调用

bind（）

的示例，让视图侦听模型上的

change

（或

change:attr

）事件（尽管我建议使用

on（）

而不是

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

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

var NoteView = Backbone.View.extend( {

  initialize : function () {

    this.collection = new NoteList;    

  },
  // initialize


  events : {

    "click #lol" : "createNote"

  },
  // events


  createNote : function () {

    this.collection.push( new Note );

    // Or, because you've set the `model` property of your
    // collection class, you can just pass in attrs.

    this.collection.push( {} );

  }
  // createNote

} );


var note = new NoteView( { el : $( "body" )[0] } );

---

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

Comments集合

保存类型为

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

---

我希望这能回答您的问题，或引导您走向正确的方向。

谢谢您的回答。我仍然不能完全理解主干，无法使用它。我最初认为我可以边走边学，但学习使用它的最好方法似乎是查看源代码。话虽如此，我认为我最初的意图是创建一个视图，该视图将能够创建新模型并将它们插入到集合中。@Sean您可以在进行过程中学习如何使用它，但除了查看文档外，查看源代码是非常宝贵的，因为文档不是非常完整、布局良好或准确。如果另一个答案更符合你的观点，好的。但如果这是你的意图，我对你为什么选择另一个答案感到困惑——它根本没有表明这一点。我的答案显示了一个修改过的代码版本，可以实现这一点。并不是我认为另一个答案更准确，或者说比另一个更准确，只是我的人为错误，忘了给你评分。学分归你。非常感谢。