backbone--部分總結

一、Backbone.history.start 方法可讓咱們在點擊後退或者前進的時候一樣會觸發路由的事件。

二、添加路由的路徑，添加的路由路徑要求重寫父類的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);
         }
     });

三、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，不會被造成瀏覽記錄（即後退也不能回到跳轉前的頁面）

四、建立模型：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.變量名，變量名必須爲大寫