backbone js 入门二
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了backbone js 入门二相关的知识，希望对你有一定的参考价值。
为什么分这么篇，因为我知道有一部分人像我这样，长篇的看不下去啊
三：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>
以上是关于backbone js 入门二的主要内容，如果未能解决你的问题，请参考以下文章