深入理解Backbone.js模型

在讨论任何MV*模式时,模型无疑是架构/应用中最重要的部分。模型包含了所有的应用数据。除了保存数据外,模型类还对数据执行各种操作。这些操作包括验证数据的可能性、持久化数据的可能性,以及定义对模型中包含的数据的各个部分的访问(访问控制)。

在构建Backbone.js应用时,模型也是最重要的构建块。它跟踪应用数据,对数据进行验证,并提供一种机制,要么将数据本地存储在localStorage中,要么远程存储在服务器上使用Web服务。

要创建一个Backbone模型,只需要扩展Backbone模型类。以下代码片段展示了如何做到这一点。

var Book = Backbone.Model.extend({ // 模型定义 });

如果想要创建一个继承自模型类的模型,那么只需要从模型类扩展。

var ChildrensBook = Book.extend({ // 子模型定义 });

Backbone模型可以通过使用new关键字来实例化。

var book = new Book();

要删除一个模型,只需要在模型上调用destroy函数。

book.destroy();

有时,删除一个模型可能需要一些时间(取决于模型的大小)。在这种情况下,可以定义一个函数,该函数将在模型成功删除时被调用。

book.destroy({ success: function() { alert("模型已成功销毁"); } });

通常,希望有一个深度复制的对象或模型的克隆。要创建一个Backbone模型的克隆,只需要调用clone方法。

function cloneModel() { var book = new Book(); var book2 = book.clone(); }

Backbone模型不强制在模型定义本身中定义属性,即,可以创建一个模型并临时指定属性。假设想要在Book模型中创建2个属性。让尝试临时创建它们。

var book = new Book({ ID: 1, BookName: "示例书籍" });

现在创建属性是支持的,并且它是一个非常强大的特性。但这个特性在处理大规模应用时实际上是一个维护噩梦。从可维护应用的角度和最佳实践的角度来看,希望能够在模型定义本身中定义模型属性。

为了实现这一点,可以使用defaults函数。defaults函数用于指定模型的默认属性及其默认值。现在让尝试将属性移动到模型定义中。

var Book = Backbone.Model.extend({ defaults: { ID: "", BookName: "" } });

这样,仅仅实例化模型就足够了,创建的模型将与这些属性相关联。

一旦指定了模型属性,就需要能够获取和设置它们的值。为此,可以使用模型上的get和set函数。

var book = new Book(); book.set("ID", 3); book.set("BookName", "C#简明教程"); var bookId = book.get('ID'); var bookName = book.get('BookName');

由于Backbone允许临时添加属性,需要一种方法来确定特定的属性是否存在于模型中。为此,可以使用model上的has函数。

book.has('ID'); // true book.has('author'); // false

还可以在模型类中定义函数。让尝试在模型类中创建一个简单函数。

var Book = Backbone.Model.extend({ defaults: { ID: "", BookName: "" }, showAlert: function() { alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName')); } });

每当创建一个模型时,Backbone都会调用其initialize函数。可以覆盖这个函数以提供自定义行为。

var Book = Backbone.Model.extend({ defaults: { ID: "", BookName: "" }, initialize: function() { console.log('书籍已被初始化'); }, showAlert: function() { alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName')); } });

还可以监听模型属性的变化。这可以通过监听change事件来完成。Backbone在任何模型属性发生变化时都会引发change事件。对于每个属性,可以使用hasChanged方法来检查该属性是否已被更改。让尝试将事件处理程序连接到监听当前模型的模型更改。

var Book = Backbone.Model.extend({ defaults: { ID: "", BookName: "" }, initialize: function() { console.log('书籍已被初始化'); // 让连接一些事件处理程序来监听模型更改 this.on('change', function() { if (this.hasChanged('ID')) { console.log('ID已被更改'); } if (this.hasChanged('BookName')) { console.log('书名已被更改'); } }); }, showAlert: function() { alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName')); } }); var Book = Backbone.Model.extend({ defaults: { ID: "", BookName: "" }, initialize: function() { console.log('书籍已被初始化'); // 让连接一些事件处理程序来监听模型更改 this.on('change:BookName', function() { console.log('来自特定监听器的消息:书名已被更改'); }); }, showAlert: function() { alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName')); } });
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485