前面幾篇 Backbone.js 的例子中有使用到 template, 及數據的填充，其實這已經很接近 Model 了。現在來學習怎么創建自己的 Model 類，並簡單的使用。Backbone.js 中 Model 會涉及到很多的概念，如 Model 的初始化，默認值，屬性的讀寫，屬性值改變的監聽，數據渲染，校驗，以及與服務端的數據同步等。
本文不打算講前面大部分的內容，最初思考的一個脈絡是怎么把 Model 引入進來，所以線索會是 建立 Model 類 -> 初始化 Model 實例 -> 設置值 -> 渲染到頁面，其余 Model 特性分別再深入。
直觀地能想到的 JavaScript 的 Model 是一個 JSON 對象，差不多，不過 Backbone 賦予 Model 默認屬性，只能通過 getter/setter 方法來訪問 Model 中的屬性值，不能直接用點操作符，相當於 Backbone 的屬性是私有的。
聲明 Model 類
var Person = Backbone.Model.extend({ defaults : { //看上去是指定默認值，同時也是聲明有些什么屬性 name : 'unknown', age : 20 } });
使用 Model
// 實例化 Model 對象 var john = new Person({ name : 'John' //沒有指定 age，默認為 20 }); console.log("1: " + john.name); //undefined console.log("2: " + john.get('name')); //john console.log("3: " + john.get('age')); //20 john.age = 45; //這種方式賦值, 不能設置到 john.attributes 中去 console.log("4: " + john.get('age')); //20 john.set({age: 100}); console.dir(john);
上面輸出為
因為存儲的字段都在對象的 attributes 的屬性中，所以不能簡單的用點操作來存取值，而要使用
john.get('name');
john.escape('name'); //可轉義 HTML 標簽
john.set({name: 'Johnson'});
john.set('name', 'Johnson');
再看在 View 中如何顯示 Model 中的屬性值，因為模板是用點操作來訪問屬性值的，所以 model 要調用 toJSON() 把屬性值釋放到第一層級上來。完整的渲染 Model 數據的例子如下：
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container"></div> <script type="text/template" id="person_template"> <%= name %>'s age is <%= age %> </script> </body> </html> <script> //定義 Model var Person = Backbone.Model.extend({ defaults : { //聲明屬性，並指定默認值 name : 'unknown', age : 20 } }); var PeopleView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { var template = _.template($("#person_template").html()); //模板中使用點操作符來訪問屬性的，obj.name, 所以要 toJSON() 轉換 this.$el.html(template(this.model.toJSON())); } }); // 實例化 Model 對象 var john = new Person({ name : 'John' }); john.set('age', 30); john.age = 45; //這種方式賦值不管用的 var peopleView = new PeopleView({model: john}); </script>
點擊鏈接 http://jsfiddle.net/Unmi/4qXz7/ 執行代碼可看到結果。上面代碼在網頁中輸出為
John's age is 30
現實應用中，一般操作的都是 Model 所組成的集合，所以后面我們會用到 Backbone 的 Collection。這也是 Backbone 中一個重要的概念，繼續中。
本文鏈接 http://unmi.cc/backbone-js-with-model/, 來自 隔葉黃鶯 Unmi Blog