如何將模型綁定到視圖？

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

我希望這會回答你的問題，或者帶領你走向正確的方向。