为什么分这么篇，因为我知道有一部分人像我这样，长篇的看不下去啊
三：collection -----------collection 就是model的集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backbone -collection</title>
</head>
<body>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
<script>
(function($){
var Book = Backbone.Model.extend({
defaluts:{
name:"default",
page:"100",
}
});
var BookShelf = Backbone.Collection.extend({
//model属性指定模型类
model:Book,
//也可以是构造函数重写这个属性，返回一个模型
/*model: function(attrs, options) {
if (condition) {
return new PublicDocument(attrs, options);
} else {
return new PrivateDocument(attrs, options);
}
}*/
});
//实例Book
var book1 = new Book({name:"book1",page:300});
var book2 = new Book({name:"book2",page:800});
var book3 = new Book({name:"book3",page:1000});
var bookshelf = new BookShelf;
//集合可以监听add remove等事件从服务器更新，能够使用underscore.js的方法
//集合中的模型触发的任何事件都可以在集合身上直接触发，所以我们可以监听集合中模型的变化
bookshelf.add(book1);
bookshelf.add(book2);
bookshelf.add([{name:"book3",page:1000}]); //两种add添加model方式
bookshelf.each(function(a){
alert(a.get("name"));
})
//删除model
bookshelf.remove(book2);
bookshelf.each(function(book){
alert(book.get("page"));
})
alert(bookshelf.length); //获取集合长度
//还有很多方法，shift unshift push pop sclie 查看underscore.js
//fetch() and parse()没有测试。
})(jQuery)
</script>
</body>
</html>
四：router 路由，之前都是url链接的方式，用router函数控制url指向哪个函数。通过锚点 hash（#page）方式完成
创建完所以得路由，需要调用Backbone.history.start() 或者 Backbone.history.start({pushState:true})
(看着例子操作了，感觉还不是很懂)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backbone-router</title>
</head>
<body>
<a href="#testjjjjj"> 这是测试 </a>
<a href="#testxxx"> 这是测试 </a>
<a href="#/posts/203"> 这是测试 </a>
<br/>
<a href="#/default/">default</a>
<br/>
<a href="#/posts/120">Post 120</a>
<br/>
<a href="#/download/user/images/hey.gif">download gif</a>
<br/>
<a href="#/dashboard/graph">Load Route/Action View</a>
<br/>
<a href="#/LIULIN/HAHA">LIUILN Route/HAHA View</a>
<br/>
<a href="#/manual">Manual</a>
<br/>
<a href="#/help/test">HELP</a><a href="#/help/1222">HELPsss</a>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
<script>
(function($){
var Router = Backbone.Router.extend({
routes:{
//当浏览器后退按钮，或是输入URL，如果匹配一个路由，此时会触发基于动作名称的event，其他对象可以监听这个路由并接受到通知
"posts/:id" : "getPost",
//下面对应的链接为<a href="#/download/user/images/hey.gif">download gif</a>
"download/*path": "downloadFile",
//下面对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a>
":route/:action": "loadView",
"manual": "manual",
"help/:id": "help",
//*匹配所以的url,放到最后
"*test": "testRoutes",
},
testRoutes:function(test){
alert(test);
},
getPost:function(id){
alert(id);
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
},
downloadFile:function(path){
alert(path);
},
manual: function() {
alert("call manual");
app_router.navigate("/posts/" + 404, {trigger: true, replace: true});
},
help: function(page) {
alert(page);
},
});
var app_router = new Router;
Backbone.history.start();
})(jQuery)
</script>
</body>
</html>
五 view 把model的数据显示到页面，同时也监听DOM上的事件作出相应
<!DOCTYPE html>
<html>
<head>
<title>backbone-view</title>
</head>
<body>
<div id="search_container"></div>
<script type="text/template" id="search_template">
<label><%= search_label %></label>
<label><%= search_label2 %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore-min.1.8.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
<script>
(function ($) {
var SearchView = Backbone.View.extend({
initialize:function(){
//alert("view");
},
//template _.template将js模板编译为可以用于页面呈现的函数，<%= %>-插入变量，<% %>执行js代码
//Render view主要目的是渲染数据，重写render方法来显示元素（el属性引起的）的模型属性
//render 绑定到模型的变更事件中 例子:
/*App.Views.Team = Backbone.View.extend({
model : new App.Models.Team,
initialize : function() {
this.model.bind("change", this.render, this);
}
})*/
render:function(context){
//用underscore编译模板
var template = _.template($("#search_template").html());
//加载模板到对应的el属性中
$(this.el).html(template(context));
},
//可以使用event绑定事件，event进行事件绑定会在el标签内定义的那一部分dome节点
events:{
"click input[type=button]":"dosearch",
//其实就是$("input [type=button]").bind("click",dosearch);
},
dosearch:function(event){
alert($("#search_input").val());
}
});
//el 属性，每个Backbone的view都有这个属性，如果没有显示，默认为空的div，可以在定义的view的时候声明，也可以在实例的时候通过参数传递。$el 是对view的缓存。
var searchView = new SearchView({el:$("#search_container")});
searchView.render({search_label:" 搜索",search_label2:"ceshi"});
//在模板中定义的变量必须在render的时候传递进去，否则报错
})(jQuery);
</script>
</body>
</html>
时间： 2024-11-09 00:20:08