Posted on 2016-04-02 10:06
笑看人生 閱讀(2563)
評論(0) 編輯 收藏
項目里用到Backbone＋marionet框架，由于以前沒有接觸過這些技術，經過一段時間的學習，覺得這技術還是很強大的，現把
學習體會總結一下，以便后面查詢。
Backbone是一個基于MVC模式的前端JavaScript框架，用于前端頁面開發。
可以從http://backbone.js上下載對應的版本。
使用Backbone，需要依賴其他一些js庫。
jQuery http://jquery.com
Underscore http://underscorejs.org
頁面的head元素內容大體如下：
1 <script src="lib/jquery-2.2.2.js"></script>
2 <script src="lib/underscore-2.js"></script>
3 <script src="lib/backbone.js"></script>
Backbone是一個MVC框架，通過V來展示M的內容，C接受用戶的請求，更新模型，然后刷新V。
下面以一個例子，來說明怎么建立一個簡單的Backbone應用。
首先定義一個Model類Student, 需要繼承Backbone.Model，這個類有三個成員變量，id，name，age，套用java中的叫法，其實可能
不應該這么稱呼。
1 var Student = Backbone.Model.extend({
2 //set default values.
3 defaults: {
4 id: 0,
5 name: '',
6 age: 0
7 }
8 });
然后定義一個View類StudentView，需要繼承Backbone.View, 給這個類的成員變量el賦值 body，指明在頁面的body元素中渲染視圖，
同時重寫了渲染方法render，指明如何渲染，以下代碼應用jQuery的語法，在el指定的元素內，顯示指定的內容。
每個視圖綁定一個Model，在View的所有方法中可以直接調用this.model獲取當前View綁定的Model對象，如下例子
this.model.get('id'),注意獲取model屬性值時，不能直接使用thi.model.id
1 var StudnetView = Backbone.View.extend({
2
3 el: 'body',
4
5 render:function(){
6 var html = '學號: ' + this.model.get('id') + '.' +
7 '姓名: ' + this.model.get('name') + '.' +
8 '年齡: ' + this.model.get('age');
9
10 $(this.el).html(html);
11 }
12 });
定義完模型和視圖類之類，接下來就是創建模型類和視圖類對象，創建方法類似于java中創建對象。
新建一個model對象student，給對象屬性指定值。
新建一個view對象，并且指定該view綁定的model對象。
調用view的渲染方法。
1 var student = new Student({
2 id: 10000,
3 name: '王小二',
4 age: 30
5 });
6
7
8 var studnetView = new StudnetView({
9 model: student
10 });
11
12 studnetView.render();
至此Backbone的代碼就全部寫完了，只要把這些新建Model和View的代碼放到自定義的js文件中，
在頁面加載時調用即可，這里自定義js文件名為main.js,內容如下：
1 (function($){
2 $(document).ready(function(){
3
4 var student = new Student({
5 id: 10000,
6 name: '王小二',
7 age: 30
8 });
9
10
11 var studnetView = new StudnetView({
12 model: student
13 });
14
15 studnetView.render();
16
17 });
18
19 //set model
20 var Student = Backbone.Model.extend({
21 //set default values.
22 defaults: {
23 id: 0,
24 name: '',
25 age: 0
26 }
27 });
28
29 //set view
30 var StudnetView = Backbone.View.extend({
31
32 el: 'body',
33
34 render:function(){
35 var html = '學號: ' + this.model.id + '.'
36 '姓名: ' + this.model.name + '.'
37 '年齡: ' + this.model.age;
38
39 $(this.el).html(html);
40 }
41 });
42
43 })(jQuery);
然后再新建一個index.html,內容如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Backbone.js 1</title>
6 <script src="lib/jquery-2.2.2.js"></script>
7 <script src="lib/underscore-2.js"></script>
8 <script src="lib/backbone.js"></script>
9 <script src="js/main.js"></script>
10 </head>
11 <body>
12
13 </body>
14 </html>
最后，在瀏覽器中打開這個文件，就可以看到效果了。