backbone--部分总结

1、Backbone.history.start 方法可以让我们在点击后退或者前进的时候同样会触发路由的事件。

2、添加路由的路径，添加的路由路径要求重写父类的routes这个对象

var CustRoute = Backbone.Router.extend({
          initialize: function () {
              console.log("Route initialize");
          },
          routes: {//routes表示路由，页面跳转的路径
              "": "index",//冒号前边表示网页跳转的名字，冒号后边是对应的页面名称
              "help": "help",
              "single/:single": "fsingle",
              "multip/:single/:multip": "fmultip"
         },
         index: function () {
             console.log("index");
         },
         help: function () {
             console.log("help");
         },
         fsingle: function (single) {
             console.log("single:" + single);
         },
         fmultip: function (single, multip) {
             console.log("multip:" + single + ":" + multip);
         }
     });

3、workspace.navigate("help/troubleshooting",{trigger: true});
navigate表示不通过a标签的href来实现url变更，那个至少需要用户去点击它，而使用navigate我们可以利用程序来强制实现url变更

//触发help事件处理器，假如不加{trigger:true}则不会触发help事件处理器。

workspace.navigate("help/troubleshooting",{replace: true});

replace:true表示导航之前那个url将不会计入history，不会被形成浏览记录（即后退也不能回到跳转前的页面）

4、创建模型：var model=new Backbone.Model();
　　　　　　 model.set("name","hellow");//设置模型参数
　　　　　　console.log(model.get("name"))//获取模型参数
例1：直接创建对象

　var model_1=new Backbone.Model({"name":"hello"});//创建模型对象
　　var model_2=new Backbone.Model({"name":"word"});
　　var models=new Backbone.Collection();//创建模型集合
　　models.add(model_1);//把模型对象添加到模型集合中
　　models.add(model_2);
　　alert(JSON.stringify(models));//通过JSON中解析的方法输出集合

例2：给构造函数添加实例方法和静态方法

　var M=Backbone.Model.extend({
　　aaa:function(){//实例方法
　　　　alert(123);
　　　　}
　　},{
　　bbb:function(){//静态方法
　　　　alert(456);
　　　　}
　　});
　　var model=new M();
　　model.aaa();
　　M.bbb();

例3：
　　

　var M=Backbone.Model.extend({
　　defaults:{
　　　　name:'hello'
　　　　}
　　});
　　var model=new M();
　　alert(model.get("name"));

例4：继承操作
　　

var M=Backbone.Model.extend({
　　aaa: function(){
　　　　alert(123);
　　　　}
　　});
　　
　　var ChildM=M.extend();
　　var model=new ChildM;
　　model.aaa();　　

例5：自定义事件

　　

var M=Backbone.Model.extend({
　　defaults:{
　　　　name:"hello"//设置模型中默认的name为hello
　　　　},
　　initialize:function(){
　　　　this.on("change",function(){//当defaults中数据发生变化时，需要执行function中的内容，也就是当模型中name变为hi的时候，执行alert（123）
　　　　　　alert(123);
　　　　　　})
　　　　}
　　});
　　var model=new M;
　　model.set("name","hi");//设置模型中name属性为hi　

例6：自定义事件
　　

var M=Backbone.Model.extend({
　　defaults:{
　　　　name:"hello"//设置模型中默认的name为hello
　　　　},
　　initialize:function(){
　　　　this.on("change：name",function(){//当defaults中name数据发生变化时，需要执行function中的内容，也就是当模型中name变为hi的时候，执行alert（123）
　　　　　　alert(123);
　　　　　　})
　　　　}
　　});
　　var model=new M;
　　model.set("name","hi");//设置模型中name属性为hi

例7：视图跟模型连接到一起

　　

$(function(){
　　　　var M=Backbone.Model.extend({
　　　　defaults:{
　　　　　　name:"hello"
　　　　　　}
　　　　});
　　　　var V=Backbone.View.extend({
　　　　initialize:function(){
　　　　　　this.listenTo(this.model,"change",this.show);
　　　　　　},
　　　　show:function(model){
　　　　　　$("body").append('<div>'+model.get("name")+'</div>');
　　　　　　}
　　　　});
　　　　var m=new M;
　　　　var v=new V({model:m});
　　　　m.set("name","hi");
　　　});

例8：数据与模型　

/*Backbone.sync=function(method,model){//Backbone.sync同步到服务器上
　　　　alert(method+":"+JSON.stringify(model));
　　　　model.id=1;
　　};*/
　　var M=Backbone.Model.extend({
　　defaults:{
　　　　name:"hello"
　　},
　　url:'/user'//save()是通过ajax方式把值发送给后台，url即是ajax中的url，然后存到服务器上。set()只是将数据保存到本地
　　});
　　var m=new M;
　　m.save();//把现在的模型对象保存到服务器上
　　m.save({name:"hi"});

例9：获取服务器上的数据　

/*Backbone.sync=function(method,model){//Backbone.sync同步到服务器上
　　　　alert(method+":"+JSON.stringify(model));
 
　　};*/
　　var C=Backbone.Collection.extend({
　　initialize:function(){
　　this.on("reset",function(){//当获取数据成功后会执行reset中的方法，意思就是服务器中的数据获取成功执行函数
　　　　alert(123);
　　});
　　},
　　url:"/users"//获取服务器上数据的地址
　　});
　　var models=new C;
　　models.fetch();//fetch()是获取服务器上的数据　

例9：Backbone路由域历史管理

var Workspace=Backbone.Router.extend({
　　routes:{
　　　　"help":"help",
　　　　"search/query":"search",
　　　　//#search/kiwis可跳转这类
　　　　"search/:query/p:page":"search"
　　　　//#search/kiwis/p7可跳转这类
　　　　},
　　help:function(){
　　　　alert(1);
　　　　},
　　search:function(query,page){
　　　　alert(2);
　　　　}
　　});
　　var w=new Workspace;
　　Backbone.history.start();

例10：事件委托

$(function(){
　　　　var V=Backbone.View.extend({
　　　　el:$("body"),//当前的委托人
　　　　events:{
　　　　　　'click input':'aaa',//页面上有一个input按钮和几个li
　　　　　　'mouseover li':'bbb'
　　　　},
　　　　aaa:function(){
　　　　　　alert(123);
　　　　　　},
　　　　bbb:function(){
　　　　　　alert(456);
　　　　　　}
　　　　});
　　　　var veiw=new V;
　　　　})

例11：html和js分离

<script type="text/template" id="template">
 
　　<% for(var i=0;i<5;i++){%>//此处可用这种方式循环，也可不循环
 
　　　　<div><%=name %></div>
 
　　<% } %>
</script>
<script>
　$(function(){
　　　　var M=Backbone.Model.extend({
　　　　defaults:{
　　　　　　name:"hello"
　　　　　　}
　　　　});
　　　　var V=Backbone.View.extend({
　　　　initialize:function(){
　　　　　　this.listenTo(this.model,"change",this.show);
　　　　　　},
　　　　show:function(model){
　　　　　　$("body").append(this.template(this.model.toJSON()));
　　　　　　},
　　　　template:_.template($('#template').html());
　　　　});
　　　　var m=new M;
　　　　var v=new V({model:m});
　　　　m.set("name","hi");
　　　});
</script>

参考网站：网易云课堂视频（妙味）  http://www.cnblogs.com/yaozhenfa/p/backbone_router.html

require.js 及 mustache.js参考笔记 http://www.cnblogs.com/dongxiaolei/p/5834021.html http://www.cnblogs.com/dongxiaolei/p/5834018.html

如果需要定义全局变量，在src/app/main.js中定义window.变量名，变量名必须为大写