主干-用户案例

Question

假设用户正在向下浏览页面，并勾选并选择项目。我有一个主干模型对象，每次用户选择某项内容时，我都想更新该对象。

我有一个单独的JavaScript文件，我在我的超文本标记语言中源码：

var app = {}; 
var newLineup = null;

var team = document.getElementsByName('team');

app.Lineup = Backbone.Model.extend({
    defaults: {
        team: team,
        completed: false
    },
    idAttribute: "ID",
    initialize: function () {
        console.log('Book has been intialized');
        this.on("invalid", function (model, error) {
            console.log("Houston, we have a problem: " + error)
        });
    },
    constructor: function (attributes, options) {
        console.log('document',document);
        console.log('Book\'s constructor had been called');
        Backbone.Model.apply(this, arguments);
    },
    validate: function (attr) {
        if (attr.ID <= 0) {
            return "Invalid value for ID supplied."
        }
    },
    urlRoot: 'http://localhost:3000/api/lineups'
});

function createNewLineupInDatabase(){
    newLineup = new app.Lineup({team: team, completed: false}); 

    newLineup.save({}, {
        success: function (model, respose, options) {

        },
        error: function (model, xhr, options) {

        }
    });
}

当用户第一次访问该页面时，我将通过调用上面的函数来创建一个新的lineup对象。但是，当用户与页面交互时，如何更新该对象呢？除了将Backbone模型对象放在JavaScript文件的顶部之外，还有更好的方法吗？

Answer 1

主干模式是为回答您的问题而设计的。正如其他受访者所说，连接一个View，它接受您的模型作为参数，并允许您将DOM事件绑定到模型。

也就是说，您不必使用框架的其余部分。我猜你可以通过自己处理模型来使用Backbone提供的所有功能模型。

你需要担心几件事。

1. 为您的模型提供了一点封装。
2. 为您的checkbox项目设置一个或多个侦听器。

将模型范围扩大到您的应用程序

Backbone为视图中的模型提供了整洁的封装，但如果你可以接受它，只需使用你发布的JavaScript文件范围内的app变量即可。

准备好实例化模型时，将其设置为app的属性

app.newLineup = new app.Lineup({team: team, completed: false});

将实例和构造器放在同一个对象中可能看起来很奇怪，但在取出主干的其余部分之前，没有其他选择。

倾听者

所以你有N个你关心的复选框。比如说你给他们上了一堂课，比如说，.options。你的监听器看起来会像这样

$( ".options" ).change(function() {
    if(this.checked) {
        //Do stuff with your model
        //You can access it from app.newLineup 
    } else {

    }
});

瞧！现在你的页面已经准备好和你的模型对话了。

Answer 2

如果你的代码中有前端ui /任何用户交互，那么创建一个主干视图是非常有用的，它利用了一个事件对象，你可以在其中设置你的事件处理程序。

您还可以将视图链接到模型，以允许更新模型/对象而不会出现作用域问题。