backbone.js初窥

BACKBONE.JS简单入门

1.BACBONE.JS有什么？

没有仔细去看backbone的源代码，看了他的api中文文档，里面大概包含有一下几个部分：model,collection,view,router多余的就没仔细去看，这里只是说说一些大概的内容。

model是最基本是MVC模型中的M层（模型层），而collection则是model的集合而已。view显而易见是处理页面的渲染的。

2.MODEL

backbone中创建模型的简易方式是：

Backbone.Model.extend({
    initialize:function(){},
    default:{}
});

　　里面第一个参数initialize是初始化方法，在模型创建完成后就触发。default是默认属性，如果所创建的模型有一些属性是必须的，可以在default对象中填充。

var MyModel = Backbone.Model.extend({
    		initialize: function(){
	            alert('hello world!');
                    this.bind('change:name',function(){alert('you have just change my name')});//注释一
	        },
                default:{
                   name:'king',
                   age:20
                }
    	});
var model=new MyModel;

注释一是在模型中添加了事件绑定，当用户对模型的属性做出改动后会触发后面的方法,比如当用户执行model.set('name','newname')的时候就是触发该事件。

对于模型，我们常常需要操作里面的属性，获取或修改，因此backbone给我们提供了set和get方法用来操作这些属性。

我们可以像下面这样来获取模型的属性：

var name1=model.attributes.name;
//也可以像下面这样获取模型的属性
var name2=model.get('name');
//修改属性则是这样：
model.set(‘name','newName');

　　

3.COLLECTION

backbone创建collection的方式如下

var ModelCollection=Backbone.Collection.extend({
    	});
var myCollection=new ModelCollection;

myCollection.add(model)

/*
另一种方式创建collection
var myCollection=new Backbone.Collection(
    [{name:'aa'},{name:'bb'}]
);


*/

　　在collection中包含了underscore的方法,因此我们可以在collection中通过underscore中提供的这些方法来操作集合所包含的这些模型。

underscore提供的方法有forEach,find,every,max,min,include等，在这里不必赘述，可以到underscore的官网文档上去看。

当然collection也提供了跟Model一样的一些属性，包括Initialize用来初始化集合。用法跟上面的模型类似。

4.VIEW

在视图层中，backbone为我们组织了一种稍为美观的对象模型。创建view的大致轮廓如下：

var App=Backbone.View.extend({
	    	el: $("body"),
	    	initialize: function () {
	    	}, 
	    	events: {
	    		"click .add":  "addLi",
	    		"click .delete":	"deleteLi",
	    		"click .edit":	"editLi"
	    	},
                addLi:function(){},
                deleteLi:function(){},
                editLi:function(){}
}

这个结构是比较清晰明了的，首先el属性确定的是这个视图所要操作的范围（如果在下面的选择器中都是以this.el为基础的话）.第二个初始化方法不用说了，即在生成这个视图的时候就会执行里面的代码。第三个是事件绑定，该events对象包含的key/value对中，左边的属性包含了事件名称和选择器，右边的值表示的是事件触发所执行的方法名称。例如"click .add":"addLi"表示的就是当用户点击含有类名为add的元素的时候就会触发addLi方法。　

5.路由

先贴上中文参考文档中的代码示例：

var Workspace = Backbone.Router.extend({

  routes: {
  "help":                 "help",    // #help
  "search/:query":        "search",  // #search/kiwis
  "search/:query/p:page": "search"   // #search/kiwis/p7
  },
  
  help: function() {
  ...
  },
  
  search: function(query, page) {
  ...
  }
  
});

这里的路由，按照我的理解和测试，利用它能够创建出无需页面刷新的类似tab切换，同时又有历史记录功能的这样一个东西。

里面的属性配置就是左边是锚点的值，右边对应触发的action。例如如下HTML结构：

<li><a href="#help">help</a></li>
<li><a href="#search/kiwis"></a></li>


<div class="content">
<!--内容-->
</div>

假设上面的help,search这两个方法都是加载不同的内容进入到类名为content的div中，则当用户点击第一个Li的时候就会触发上面的help方法，将对应的内容Load进页面中，不刷新页面。当用户再点击第二个LI的时候也是执行类似的过程，因为这整个过程都是利用了锚点的特性，使得浏览器能够产生一个历史记录，所以当用户点击浏览器的后退或前进的时候能够对应上用户的点击记录。