Backbone之旅——Model篇

Backbone做爲前端的MVC框架，把後端的設計思想帶到前端，使前端代碼更加清晰、可維護性大大提升

Backbone依賴於underscore.js和jquery，因此在使用backbone的時候必定要引入這兩個經常使用的js庫，jquery應該算是web前端的標配了吧，undersocre也是一個很通用的庫，在nodejs中一樣也使用。此處有個坑，三個js庫的引用是有順序的，jquery、underscore、backbone必定要按照這個順序，而且全部的js要放到body的後面也就是頁面的底部

Backbone主要有4部分組成，Model、View、Collections和Router

Model：很明顯數據模型

View：展現頁面

Collections：裝載Model對象的集合

Router：前端路由，這個在實現單頁應用的時候很是實用，很好的控制頁面的跳轉和返回

接下來學習Model

定義一個簡單的model

var Person = Backbone.Model.extend({

　　url:"/tt/save",

　　initialize: function(){

　　　　console.log("create person model");

　　　　this.bind("invalid", function(model, error){

　　　　　　if(error){

　　　　　　　　console.log(error);

　　　　　　}

　　　   });

           this.bind("change:name", function(){

　　　　　　var name = this.get("name");
　　　　　　console.log("你改變了name屬性: " + name);

            });

　　},

　　defaults:{

            name:null

      },

　　validate: function(attributes){

　　　　　if(attributes.name === ""){

　　　　　　　return "name不能爲空";　　

　　　　　}

      }

});

var person = new Person;//實例化一個person對象，這樣就完成了一個簡單Model對象

//initialize：就是構造函數

//defaults：對形默認的屬性，一樣可使用person.set({});進行賦值

//validate：就是對模型的屬性進行驗證，可是必定要監聽invalid，而且只有在model執行save的時候才能被觸發，可是若是要再set的時候執行的話，那麼須要

                person.set({}, {"validate": true});這樣就手動觸發了，在執行set的是觸發

//change：這個會知道model的屬性被set改變時觸發，

//url：這個就牛逼了，Model在執行save的時候會和服務器進行數據交換，是經過Backbone.sync來實現的，其實就是jquery的ajax，主要是集中請求方式的對應，

          create、update、read、delete，會對應到http請求的post、put、get、delete，因此這個地方是須要用到restful格式的api（這個本身慢慢看吧），

          在model中配置了url，默認的save，在沒有初始化屬性的model時觸發的是create（post），若存在初始化屬性則觸發的是update（put），這就須要在後端配置路由的時候注意了

person.save();//則會觸發create，若存在model則觸發update，

使用fetch來自定義請求，只不過fetch觸發的是read

person.fetch({

　　url:"/tt/man",

　　success:function(model, res){},

　　error: function(){

　　　　console.log("error");

　　}

});

 

model是否是挺好理解的................