BackBone 教程 - 第二部分：理解 BackBone 模型的基础
4.97/5 (24投票s)
在本文中，我们将讨论 Backbone 模型的基础知识。
引言
在本文中，我们将讨论 Backbone 模型的基础知识。
背景
当我们谈论任何 MV* 模式时，模型无疑是架构/应用程序中最重要的部分。模型包含了所有应用程序数据。除了存储数据，模型类还对数据执行各种操作。操作包括：验证数据的可能性、持久化数据的可能性、定义对模型中包含的各种数据部分的访问（访问控制）。
就构建 backbone.js 应用程序而言，Backbone.js 模型也是最重要的构建块。它跟踪应用程序数据，对数据执行验证，并提供一种机制来将数据持久化到本地的 localstorage 或通过 Web 服务远程到服务器。
完整系列链接
- BackBone 教程 – 第一部分：Backbone.Js 简介[^]
- BackBone 教程 – 第二部分：理解 Backbone 模型的基础[^]
- BackBone 教程 – 第三部分：更多关于 Backbone 模型的内容[^]
- BackBone 教程 – 第四部分：使用 HTTP REST 服务对 BackboneJs 模型进行 CRUD 操作[^]
- BackBone 教程 – 第五部分：理解 Backbone.js 集合[^]
- BackBone 教程 – 第六部分：理解 Backbone.js 视图[^]
- BackBone 教程 – 第七部分：理解 Backbone.js 路由和历史[^]
- BackBone 教程 – 第八部分：理解 Backbone.js 事件[^]
创建一个简单的 backbone.js 模型
要创建 backbone 模型，我们只需扩展 backbone 模型类。下面的代码片段展示了如何做到这一点。
var Book = Backbone.Model.extend({
});
此外，如果我们想创建一个继承自我们 model 类的模型，那么我们只需要继承自我们的 model 类。
var ChildrensBook = Book.extend({
});
实例化一个模型
Backbone 模型可以通过使用 new 关键字来简单实例化。
var book = new Book();
删除一个模型
要删除模型，我们只需在模型上调用 destroy 函数。
book.destroy();
有时，删除一个 model 可能需要一些时间（取决于 model 的大小）。在这种情况下，我们可以定义一个函数，当 model 被成功删除时会被调用。
book.destroy({
success: function () {
alert("The model has been destroyed successfully");
}
});
克隆一个模型
我们经常需要一个深度复制的对象或模型的克隆。要创建 backbone 模型的克隆，我们只需调用 clone 方法。
function cloneModel() {
var book = new Book();
var book2 = book.clone();
}
如何指定模型属性
Backbone 模型不会强制在模型定义本身中定义属性，也就是说，可以创建一个模型并在需要时指定属性。比如说，我们想在 Book 模型中创建两个属性。让我们尝试在需要时创建它们。
var book = new Book({
ID: 1,
BookName: "Sample book"
});
模型属性的默认值
现在，在需要时创建属性得到了 backbone 模型的支持，这是一个非常强大的功能。但对于大规模应用程序来说，这个功能实际上会导致维护噩梦。从可维护应用程序的角度和最佳实践的角度来看，我希望能够在我自己的模型定义中定义我的模型属性。
为了实现这一点，可以使用 defaults 函数。defaults 函数用于指定模型的默认属性及其默认值。现在让我们尝试将属性移到模型定义中。
var Book = Backbone.Model.extend({
defaults: {
ID: "",
BookName: ""
},
});
这样，仅仅实例化模型就足够了，创建的模型将与这些属性相关联。
设置和获取模型属性
一旦我们指定了模型属性，我们还需要能够获取和设置它们的值。为此，我们可以使用模型上的 get 和 set 函数。
var book = new Book();
book.set("ID", 3);
book.set("BookName", "C# in a nutshell");
var bookId = book.get('ID');
var bookName = book.get('BookName');
如何检查属性是否存在
由于 backbone 允许我们在需要时添加属性，我们需要一种方法来识别特定属性是否存在于 model 中。为此，我们可以使用 model 上的 has 函数。
book.has('ID'); // true
book.has('author'); // false
在模型中定义函数
我们也可以在 model 类中定义我们的函数。让我们尝试在我们的 model 类中创建一个简单的函数。
var Book = Backbone.Model.extend({
defaults: {
ID: "",
BookName: ""
},
showAlert: function () {
alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName'));
}
});
initialize 函数
每当我们创建一个 model 时，backbone 都会调用它的 initialize 函数。我们可以覆盖这个函数来提供自定义行为。
var Book = Backbone.Model.extend({
defaults: {
ID: "",
BookName: ""
},
initialize: function(){
console.log('Book has been initialized');
},
showAlert: function () {
alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName'));
}
});
监听模型属性变化
我们还可以使用事件来监听模型变化。这可以通过监听 change 事件来完成。每当 model 属性发生变化时，Backbone 就会触发一个 change 事件。对于每个属性，我们可以使用 hasChanged 方法来检查该属性是否已更改。让我们尝试将事件处理程序挂钩以监听当前模型中的模型更改。
var Book = Backbone.Model.extend({
defaults: {
ID: "",
BookName: ""
},
initialize: function(){
console.log('Book has been initialized');
// Lets hook up some event handers to listen to model change
this.on('change', function() {
if(this.hasChanged('ID')){
console.log('ID has been changed');
}
if(this.hasChanged('BookName')){
console.log('BookName has been changed');
}
});
},
showAlert: function () {
alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName'));
}
});
如果我们有很多属性，并且我们有兴趣监听任何特定属性的变化，那么也许我们也可以在 change 事件绑定中指定它。让我们尝试只监听 BookName 的变化。
var Book = Backbone.Model.extend({
defaults: {
ID: "",
BookName: ""
},
initialize: function () {
console.log('Book has been initialized');
// Lets hook up some event handers to listen to model change
this.on('change:BookName', function () {
console.log('Message from specific listener: BookName has been changed');
});
},
showAlert: function () {
alert('ID: ' + this.get('ID') + ', BookName: ' + this.get('BookName'));
}
});
看点
这就是本篇博客的全部内容。本文的目的是让大家熟悉 backbone 模型的基本概念。在下一篇文章中，我们将探讨与 backbone 模型相关的更高级的主题。本文是从初学者的角度撰写的，希望有所帮助。