我在骨干.js中使用的模型和视图是否正确

Question

我开始学习belimber.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' });

});

Answer 1

您认为有一个错误。 首先，通常的做法是在创建新视图时将模型作为参数传递：

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

现在您可以在视图中通过this.model访问模型。

接下来的事情是在view中使用变量视图。 使用Backbone的View意味着您可以拥有一个View类的多个实例。 因此，调用new SettingsView()会创建视图的实例。 让我们考虑一下您的视图的两个实例：

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

每当您调用view.settings.save(); 在您的一个实例中，它将始终在第一个视图实例中调用该方法，因为它绑定了变量名“ view”。 因此，您要做的就是使用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。 因此，您可以直接在模型上调用set。

同样使用tagName: 'li'并插入元素将无法按预期工作。 仅当不将元素插入构造函数时，使用tagName才有效。 在这种情况下，主干将使用tagName创建一个新元素。 否则，视图的元素就是您传递给构造函数的元素。

我在骨干.js中使用的模型和视图是否正确

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-12-15 20:02:55

我在骨干.js中使用的模型和视图是否正确

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-12-15 20:02:55

解决方案1
1 已采纳 2011-12-15 20:02:55