假设用户正在关闭页面并检查并选择项目。 我有一个Backbone模型对象,每次用户选择我想要更新对象的东西。
我在一个单独的JavaScript文件中有这个,我在HTML中输入:
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) {
}
});
}
当用户第一次访问页面时,我将通过调用上面的函数创建一个新的阵容对象。但是,当用户与页面交互时,如何更新该对象?除了将Backbone模型对象放在JavaScript文件的顶部之外,还有更好的方法吗?
答案 0 :(得分:2)
Backbone模式旨在回答您的问题。正如其他受访者所说,连接一个View,它将您的模型作为参数,并允许您将DOM事件绑定到模型。
那就是说,你没有拥有来使用框架的其余部分。我想你可以使用Backbone通过自己处理模型提供模型的所有功能。
你需要担心一些事情。
checkbox
项设置一个或多个侦听器。 Backbone在View中为您的模型提供了整洁的封装,但如果您可以使用它,只需使用您发布的JavaScript文件范围内的app
变量。
当您准备好实例化模型时,请将其设为app
的属性:
app.newLineup = new app.Lineup({team: team, completed: false});
将实例和构造函数放在同一个对象中可能看起来很奇怪,但是在拉出Backbone的其余部分之前没有其他选项。
所以你有N个你关心的复选框。假设你给他们上课,比如.options
。你的听众看起来像
$( ".options" ).change(function() {
if(this.checked) {
//Do stuff with your model
//You can access it from app.newLineup
} else {
}
});
瞧!现在您的页面已准备好与您的模型交谈。
答案 1 :(得分:1)
如果您的代码中存在前端ui /任何用户交互,则创建一个使用事件对象的骨干视图非常有用,您可以在其中设置事件处理程序。
您还可以将视图链接到模型,以允许更新模型/对象而不会出现范围问题。