1. 程式人生 > >Backbone的model學習筆記一

Backbone的model學習筆記一

model故名思議,就是一個模型。和java後端開發的資料庫對映的model是一樣的性質。

下面讓我們一起來揭開她神祕的面紗:

首先準備一個html模板:

<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>
1、定義一個model物件,並且初始化她
 
 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