如何将模型绑定到视图？

Question

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

//负荷}）;

Answer 1

更新

我只是看了看@詹姆斯伍德拉夫的回答，这促使我再看看你的代码。我第一次看得不够紧密，但我仍然不确定你在问什么。如果您要问如何让模型或视图监听并处理另一个模型触发的事件，请查看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] }); 

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

我希望这会回答你的问题，或者带领你走向正确的方向。