我正在使用模型＆視圖在backbone.js中正確

我開始學習backbone.js，並且我已經構建了我的第一個頁面，並且我想知道如果我沿着「正確」路徑行進（如就像軟件中有一條正確的道路一樣）。我正在使用模型＆視圖在backbone.js中正確

是否可以讓模型屬性（屬性）自動綁定到html元素？

的HTML：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>settings page</title> 
    <link rel="stylesheet" type="text/css" href="../Content/theme.css" /> 
    <script language="javascript" src="../Scripts/jquery-1.7.1.js"></script> 
    <script language="javascript" src="../Scripts/underscore.js"></script> 
    <script language="javascript" src="../Scripts/backbone.js"></script> 
    <script language="javascript" src="../Scripts/settings.js"></script> 
</head> 
<body> 
    <div style="width:95%;margin:10px;padding:10px;background-color:#ffffff;color:#000000;padding-bottom:8px;padding-right:5px;padding-top:4px;float:left;"> 
     <h1> 
      Settings... 
     </h1> 
     Server URL (cloud based API):  
     <br /> 
     <input id="settings-service-url" type="text" size="100" /> 
     <br /> 
     <br /> 
     Timeout:  
     <br /> 
     <input id="settings-timeout" type="text" size="100" /> 
     <br /> 
     <br /> 
     <button id="update-settings">Update Settings</button> 
    </div>  
</body> 
</html>

的Javascript：

$(document).ready(function() { 

    if (typeof console == "undefined") { 
     window.console = { log: function() { } }; 
    } 

    Settings = Backbone.Model.extend({ 
     defaults: { 
      ServiceUrl: "", 
      Timeout: 0 
     }, 

     url: function() { 
      return '/settings'; 
     }, 

     replaceServiceUrlAttr: function (url) { 
      this.set({ WisdomServiceUrl: url }); 
     }, 

     replaceTimeoutAttr: function (timeout) { 
      this.set({ Timeout: timeout }); 
     } 

    }); 

    SettingsView = Backbone.View.extend({ 

     tagName: 'li', 

     events: { 
      'click #update-settings': 'updateSettings' 
     }, 

     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.settings = new Settings; 
      this.settings.fetch({ success: function() { 
       view.render(view.settings); 
      } 
      }); 

     }, 

     updateSettings: function() { 
      view.settings.replaceServiceUrlAttr($('#settings-service-url').val()); 
      view.settings.replaceTimeoutAttr($('#settings-timeout').val()); 
      view.settings.save(); 
     }, 

     render: function (model) { 
      $('#settings-wisdom-service-url').val(model.get("WisdomServiceUrl")); 
      $('#settings-timeout').val(model.get("Timeout")); 
     } 
    }); 

    var view = new SettingsView({ el: 'body' }); 

});

來源

2011-12-15 AwkwardCoder

有你的觀點是錯誤的。首先，這是常見的做法，當你創建一個新的視圖模型作爲傳遞參數：

var view = new SettingsView({ "el": "body", "model": new Settings() });

現在你可以在你的觀點被this.model訪問你的模型。

接下來的事情是在您的視圖中使用變量view。使用Backbone的視圖意味着你可以有一個View類的多個實例。因此致電new SettingsView()會創建您的視圖的實例。讓我們想想有你的看法的兩個實例：

var view = new SettingsView({ "el": "body", "model": new Settings() }); 
var view1 = new SettingsView({ "el": "body", "model": new Settings() });

當你在一個實例調用view.settings.save();它將始終調用該方法在第一觀看實例，因爲它綁定變量名「查看」。因此，所有你需要做的使用this代替view：

SettingsView = Backbone.View.extend（{

tagName: 'li', 

    events: { 
     'click #update-settings': 'updateSettings' 
    }, 

    initialize: function() { 
     this.settings = new Settings; 
     this.settings.fetch({ success: _.bind(function() { 
     //to get this work here we have to bind "this", 
     //otherwise "this" would be the success function itself 
      this.render(view.settings); 
     }, this) 
     }); 

    }, 

    updateSettings: function() { 
     this.model.replaceServiceUrlAttr($('#settings-service-url').val()); 
     this.model.replaceTimeoutAttr($('#settings-timeout').val()); 
     this.model.save(); 
    }, 

    render: function() { 
     $('#settings-wisdom-service-url').val(this.model.get("WisdomServiceUrl")); 
     $('#settings-timeout').val(this.model.get("Timeout")); 
    } 
});

使用模型中的兩個設置方法的時刻，因爲沒有太大的意義，他們所以你可以直接調用set在模型上

也使用tagName: 'li'並插入一個元素將不會像你期望的那樣工作如果你沒有插入一個元素到構造函數中，只有使用tagName纔會有效果。在這種情況下，骨幹將使用tagName創建一個新元素。否則，e視圖的說法就是你傳遞給構造函數的那個視圖。

來源

2011-12-15 20:02:55

我正在使用模型＆視圖在backbone.js中正確

回答

相關問題