backbone.js binding的問題

我是新來的主幹，並試圖通過綁定獲取模型更新來更新我的html，但沒有運氣。我正在使用jquery.window插件來創建彈出窗口。檢查我按更改標題按鈕並更新我的模型標題，HTML不會更新。真的很感謝所有幫助，謝謝backbone.js binding的問題

埃裏克

這裏是我的代碼

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>I have a back bone</title> 
</head> 
<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> 
    <script src="js/jquery.window.js"></script> 
    <script src="js/underscore.js"></script> 
    <script src="js/backbone.js"></script> 
    <script src="js/app.js"></script> 
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/jquery.window.css"> 

    <button id="add-window">Add Window</button> 
    <button id="change-title">Change Title</button> 


    <script type="text/template" id="search_template"> 
     <label><%= title %></label> 
     <input type="text" id="search_input" /> 
     <input type="button" id="search_button" value="Search" /> 
    </script> 

</body> 
</html>

的Javascript：

(function($) { 

    AppWindow = Backbone.Model.extend({ 
     title : "John", 
     window : null  
    }); 

    AppWindows = Backbone.Collection.extend({ 
     initialize : function(models, options) { 
      this.bind("add", options.view.addWindowView); 
     } 
    }); 

    WindowView = Backbone.View.extend({ 

     initialize : function(){ 
      _.bindAll(this, "render"); 
      this.model.bind("change:title"); 
      this.template = _.template($("#search_template").html()); 
      this.render().el; 
     }, 

     render : function(){ 
      var formString = this.template(this.model.toJSON()); 
      var win = $.window({ 
       icon : 'http://www.fstoke.me/favicon.ico', 
       title : this.model.get("title"), 
       content : formString, 
       x : 80, 
       y : 80, 
       resizable : true, 
      }); 
      this.el = $("#" + win.getWindowId()+".window_frame"); 
      this.delegateEvents(this.events); 
      return this; 
     } 

    }); 

    AppView = Backbone.View.extend({ 
       views: {}, 
       el : $("body"), 
       initialize : function() { 
        this.appWindows = new AppWindows(null, { 
         view : this 
        }); 
       }, 

       events : { 
        "click #add-window" : "addWindow", 
        "click #change-title" : "changeTitle" 
       }, 

       addWindow : function() { 
        var window_title = "Eric"; 
        var window_model = new AppWindow({ 
         title : window_title 
        }); 
        // Add a new model to our friend collection 
        this.appWindows.add(window_model); 
       }, 

       changeTitle : function(){ 
        var win = this.appWindows.at(0); 
        win.set("title", "jamjamajm"); 
       }, 

       addWindowView : function(model) { 
        var view = new WindowView({ 
         model : model 
        }); 
        model.set("window", view); 
       }, 

       deleteWindow : function(wnd){ 
        console.log("deleteing"); 
       } 
      }); 

    var appview = new AppView; 
})(jQuery);

來源

2012-07-25 HorseFace

'this.model.bind（「change：title」）;'這裏忘了什麼？ 'this.model.bind（「change：title」，this.render）如何？''？ – jakee 2012-07-25 12:08:15

真棒，工作感謝！ – HorseFace 2012-07-25 12:41:28

我會做出回答 – jakee 2012-07-25 12:55:17

你忘了一個方法添加到change:title對WindowView模型的綁定。

的Backbone.js的文檔說以下有關on -function（又名綁定）：

object.on（事件，回調，[上下文]）別名：綁定

綁定一個對象的回調函數。回調將在事件觸發時被調用。

所以使用this.model.bind("change:title");您剛剛提供了每次更改屬性title時觸發的事件。您沒有提供回調函數，因此在事件觸發時沒有任何反應。我想你想的回調是WindowView的渲染功能，所以這應該修復它：

this.model.on("change:title", this.render); // changed to on as bind is deprecated but still supported

這樣，每當事件change:title被觸發，對應模型WindowView的render將被調用。

來源

2012-07-25 13:01:09 jakee

backbone.js binding的問題

回答

相關問題