Javascript 我是否在使用模型&；backbone.js中的视图正确_Javascript_Backbone.js

Javascript 我是否在使用模型&；backbone.js中的视图正确

javascript backbone.js

Javascript 我是否在使用模型&；backbone.js中的视图正确,javascript,backbone.js,Javascript,Backbone.js,我开始学习backbone.js，我已经建立了我的第一个页面，我想知道我是否走上了“正确”的道路（就像软件中曾经有过的正确道路一样）是否可以让模型属性（属性）自动绑定到html元素 html： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>settings page</title> <link rel="styl

我开始学习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>

你的观点是错误的。首先，创建新视图时，通常将模型作为参数传递：

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

现在，您可以通过视图中的

this.model

访问您的模型

接下来是在视图中使用变量

view

。使用主干视图意味着您可以拥有一个视图类的多个实例。因此，调用

newsetingsview（）

将创建视图的实例。让我们考虑一下您的视图有两个实例：

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

无论何时调用

view.settings.save（）

在您的一个实例中，它将始终在第一个视图实例中调用该方法，因为它绑定了变量名“view”。因此，您所要做的就是使用

此

而不是

视图

：

SettingsView=Backbone.View.extend({

在您的模型中使用这两种设置方法目前没有多大意义，因为它们只是调用set。因此您可以直接在模型上调用set

另外，使用标记名“li”和插入元素也不会像您预期的那样工作。只有在未将元素插入构造函数时，使用标记名才有效。在这种情况下，主干将使用标记名创建一个新元素。否则，视图的元素就是您传递给构造函数的元素

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

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