我正在使用模型＆视图在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' }); 

});

答

有你的观点是错误的。首先，这是常见的做法，当你创建一个新的视图模型作为传递参数：

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视图的说法就是你传递给构造函数的那个视图。

我正在使用模型＆视图在backbone.js中正确

相关推荐