1、模块 集合 视图 和事件的一个综合例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
</head>
<body>
<button id="check">新手报到</button>
<ul id="world-list">
</ul>
<script>
(function ($) {
var World=Backbone.Model.extend({
name:null //为什么要创建一个空的name
});
var Worlds=Backbone.Collection.extend({
initialize:function(models,options){
this.on("add", options.view.addOneWorld);//初始化绑定add方法
}
});
var AppView=Backbone.View.extend({
el:$('body'),//指定关联的元素
initialize:function(){//初始化方法
this.worlds=new Worlds(null,{view:this})//实例化一个集合，并且建一个属性view用来保存视图
},
events:{
'click #check':"checkIn"//绑定#check的click事件
},
checkIn:function(){
var world_name=prompt("请问，您是哪星人?");
world_name||(world_name = '未知');
var world=new World({name:world_name});//实例化一个模块，并设置name的值
this.worlds.add(world);//将模块添加到集合
},
addOneWorld:function(model){
$("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候</li>");
}
});
var appview = new AppView;//实例化AppView
})(jQuery);
</script>
</body>
</html>
2、为对象添加验证规则与错误提示
var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:"1.html",//需要设置url，因为save会调用sync方法把数据提交到服务器 initialize:function(){ this.on("invalid",function(model,error){//初始化时绑定验证未通过时的事件处理函数 console.log(error); }); }, validate:function(attributes){//重写验证方法 不返回或返回falsy值（假值）时不会触发invalid? if(attributes.name==""){ return "name 不能为空！"; } } }); var user=new User(); user.set("name",""); user.save();//当save时会触发validate方法
3 根目录 urlRoot
var Book = Backbone.Model.extend({ urlRoot:'/backbone_test', defaults:{"name":"Su","age":14} }); var solaris = new Book({id: "data.php"}); console.log(solaris.url());///backbone_test/data.php solaris.save();
4 使用fetch从服务端获取数据（collection中并没有urlRoot属性）
var Book = Backbone.Model.extend({//创建一个Model defaults : { title:'default' } }); var BookShelf = Backbone.Collection.extend({//创建一个集合 model : Book, url:'user.json' }); var book1 = new Book({title : 'book1'});//实例化二个model var book2 = new Book({title : 'book2'}); var bookShelf = new BookShelf([book1, book2]); //实例化集合，并将这2个model添加到集合中，也可以使用collection.add(model)添加。 // bookShelf.url = 'user.json'; //或者在这里添加url bookShelf.fetch({ success:function(collection, response, options){ collection.each(function(book){ console.log(book.get('title'));//default }); },error:function(collection, response, options){ console.log('error'); } });
6 create方法 发送数据到服务端
var NewBooks = Backbone.Collection.extend({ model: Book, url: '/books/' }); var books = new NewBooks; var onebook = books.create({ title: "I'm coming", });
create方法会在内部调用save方法，而save方法前面提过它会调用sync把数据提交到服务器。看源码也可以知道，create方法最后返回了创建的model实例
