Backbone学习笔记---Model
Backbone中的model实际上包含了程序所要用到的一些交互数据，即给表现层提供数据，也为了从后台得到数据。例如我们可以用一个model来表示photo object,它需要包含一些属性，像tags, titles和location，看代码：
var Photo=Backbone.Model.extend({ defaults:{ src:'placeholder.jpg', title:'an image placeholder', coordinates:[0,0] }, initialize:function(){ this.on("change:src",function(){ var src=this.get("src"); console.log(src); }); console.log(this.get("src")); }, changeSrc:function(source){ this.set({src:source}); } });
现在我们来逐步分析一下上述代码:
1.首先我们利用Backbone.Model.extend(),生成一个新的model,参数是一个object即我们想要的数据结构。它包含了一些属性defaults所包含的。
2.initialize()函数将在实例化model的时候被执行，我们看到了它会绑定一个事件，change:src；即如果我们在其中修改src属性时将会触发这个事件。
3.我们在设置和得到属性时，最好用如下代码: this.get("src")或者是this.set("src");
已经基本看过是如何生成一个model的了，我们来看如下代码：
var somePhoto=new Photo({ title:"testing"});//实例化一个model,会在控制台中输出"placeholder.jpg",因为initalize()函数将会执行 somePhoto.changeSrc("test1.jpg");//会输出"test1.jpg"因为它会触发change:src事件
Model.get()
get("attribute name")将会得到我们所定义的model中的属性：
console.log(somePhoto.get("src"));//"test1.jpg"
console.log(somePhoto.attributes);//{"coordinates": [0, 0], "src": "test1.jpg", "title": "testing"}
console.log(somePhoto.toJSON());//{"coordinates": [0, 0], "src": "test1.jpg", "title": "testing"}
如果我们想得到所有的属性，我们可以用attributes。不过，我们更推荐下面的那种方法即somePhoto.toJSON();
全部的代码
View Code
<!DOCTYPE html> <html> <head> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <script type="text/javascript"> var Photo=Backbone.Model.extend({ defaults:{ src:'placeholder.jpg', title:'an image placeholder', coordinates:[0,0] }, initialize:function(){ this.on("change:src",function(){ var src=this.get("src"); console.log(src); }); console.log(this.get("src")); }, changeSrc:function(source){ this.set({src:source}); } }); var somePhoto=new Photo(); somePhoto.changeSrc("test1.jpg"); console.log(somePhoto.get("src")); console.log(somePhoto.attributes); console.log(somePhoto.toJSON()); </script> </body> </html>