Backbone的model學習筆記一
阿新 • • 發佈:2019-01-11
model故名思議,就是一個模型。和java後端開發的資料庫對映的model是一樣的性質。
下面讓我們一起來揭開她神祕的面紗:
首先準備一個html模板:
1、定義一個model物件,並且初始化她<html> <head> <title>backbone的model學習/title> </head> <body> </body> <!-- functional programming utility library --> <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.underscore.js"></script> <!-- DOM & XHR utility --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <!-- Backbone.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script type="text/javascript"> 。。。。。。。 這裡面就是model程式碼的編寫區域 </script>
var People = Backbone.Model.extend({
initialize: function(){ //初始化函式
alert('我已經被建立!');
}
});
var people = new People();
執行上述程式碼將會彈出對話方塊提示:我已經被建立!
如果不執行var people = new People(); 將不會彈出改對話方塊。
2、定義一個model物件,並且賦予該物件預設的屬性
執行該方法,將會彈出提示:小明var People = Backbone.Model.extend({ initialize: function(){ // alert('我已經被建立!'); }, defaults: { name:'小明', age: '10' } }); var people = new People(); alert(hello.get('name'));
3、定義一個model物件,並且給修改她的屬性值
執行上述程式碼將會彈出提示:小米var People = Backbone.Model.extend({ initialize: function(){ alert('我已經被建立!'); }, defaults: { name:'小明', age: '10' } }); var people = new People(); people.set({name:'小米',age:'20'}); alert(hello.get('name'));
4、定義一個model物件,並且給她設定一個獲取自己資訊的函式
var People = Backbone.Model.extend({
initialize: function(){
alert('我已經被建立!');
},
defaults: {
name:'小明',
age: '10'
},
getInfo:function(){
return "name=" + this.get('name')+",age=" + this.get('age');
}
});
var people = new People();
people.set({name:'小米',age:'20'});
alert(people.getInfo());
執行上述程式碼將會彈出提示:name=小米,age=20
有咩有發現,這和java是不是很像。也是通過set和get來設值和取值。
給大家提供一個可以線上編輯的頁面連結:
http://www.gbtags.com/gb/debug/20c772d0-d3b6-4bfe-a15e-a735f0a1d4e1.htm