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.变量名,变量名必须为大写

backbone--部分总结的更多相关文章

  1. Backbone源码解析(六):观察者模式应用

    卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. 使用backbone的history管理SPA应用的url

    本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...

  4. Backbone中的model和collection在做save或者create操作时, 如何选择用POST还是PUT方法 ?

    Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行cre ...

  5. Backbone.js 中的Model被Destroy后,不能触发success的一个原因

    下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到dest ...

  6. Backbone.js应用基础

    前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...

  7. Backbone事件模块及其用法

    事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...

  8. Backbone源码学习之extend

    extend函数在backbone大概就20来行代码包括注释,对学习Javascript中"类"的继承很是好的学习资料. 下面先贴出Backbone中的源码,其中涉及到unders ...

  9. Backbone,Marionette,Talent学习笔记

    具体以源码为准 Talent继承自Marionette继承自BackBone Region: 继承自Backbone.Event,show(view)会调用view.render(),然后$el.ap ...

  10. backbone入门示例

    最近因为有个项目需要用backbone+mui  所以最近入坑backbone. Backbonejs有几个重要的概念,先介绍一下:Model,Collection,View,Router.其中Mod ...

随机推荐

  1. Jetty和Tomcat的选择:按场景而定

    Jetty和Tomcat的选择:按场景而定 Jetty和Tomcat为目前全球范围内最著名的两款开源的webserver/servlet容器.由于它们的实现都遵循Java Servlet规范,一个Ja ...

  2. 如何从MySQL官方Yum仓库安装MySQL5.6

    (一),2013年10月,MySQL开发团队正式宣布支持Yum仓库,这就意味着我们现在可以从这个Yum库中获得最新和最优版的MySQL安装包.本文将在一台全新安装的CentOS6上安装MySQL5.6 ...

  3. DIV的表单布局

    表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. extern "C" __declspec(dllexport) __declspec(dllimport) 和 def

    原文:extern "C" __declspec(dllexport) __declspec(dllimport) 和 def 前面的extern "C"  _ ...

  5. 正则表达式(/[^0-9]/g,'')中的"/g"是什么意思 ?

    正则表达式(/[^0-9]/g,'')中的"/g"是什么意思 ?     表达式加上参数g之后,表明可以进行全局匹配,注意这里“可以”的含义.我们详细叙述: 1)对于表达式对象的e ...

  6. oracle数据库中提供的5种约束

    约束作用:用来保持数据的完整性,防止无效数据进入到数据库中.oracle数据库中提供的5种约束,都是限定某个列或者列的组合的.1.主键约束(PRIMARY KEY):在一个表中能唯一的标识一行.主键可 ...

  7. [C和指针]第三部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. python进程、线程、协程(转载)

    python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CPU是计算机的核心,它承担计算机的所有任务. 操作系统是运行在硬件之上的软件,是计算机的管理者,它负责资 ...

  9. 复制选中的listbox内容

    private void lt_log_MouseClick(object sender, MouseEventArgs e) { Clipboard.SetDataObject(lt_log.Sel ...

  10. Codeforces Round #287 (Div. 2) C. Guess Your Way Out! 思路

    C. Guess Your Way Out! time limit per test 1 second memory limit per test 256 megabytes input standa ...