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>
posted @ 2012-09-06 21:54  moonreplace  阅读(389)  评论(0)  编辑  收藏  举报