BackBone.js入門教程

jxqog4473 8年前發布 | 13K 次閱讀 前端技術 Backbone.js

來自: http://www.cnblogs.com/depsi/p/5151809.html

廢話不說,直入正題。

Backbone.js是什么

Backbone.js提供了一套web開發框架,通過 Models 進行key-value綁定及自定義事件處理,通過 Collections 提供一套豐富的API用于枚舉功能,通過Views來進行事件處理及現有的Application通過RESTful JSON接口進行交互,它是基于 jQuery 和 underscore 的一個前端js框架。

Backbone中的重要概念

  • Model:根據現實數據建立的抽象,比如people

  • Collection:比如一群人

  • View:對Model和Collection中的數據進行展示,把數據渲染到頁面上

  • Router:控制頁面的路由

通過Backbone,你可以把你的數據當作Model,通過Model你可以 創建數據 ,進行 數據驗證 ,銷毀或者保存到服務器上。當界面上的操作引起model中屬性的變化時,model會觸發 change 的事件。那些用來顯示model狀態的views會接受到model觸發change的消息,進而發出對應的響應,并且重新渲染新的數據到界面。在一個完整的Backbone應用中,你不需要寫那些膠水代碼來從DOM中通過特殊的id來獲取節點,或者手工的更新HTML頁面,因為在model發生變化時,views會很簡單的進行自我更新。

感受一下

先上個例子感受一下: 簡易考勤打卡系統。

下面上代碼:

<!DOCTYPE html>
<html>

<head> <script src="; <script src="; <script src="; <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head>

<body> <button id="check">請點擊此處打卡</button> <ul id="person-list"></ul> </body> <script> (function($){ // 新建Model構造函數 var People=Backbone.Model.extend({ name:null,//姓名 ctime:null//打卡時間 }); // 新建Collection構造函數 var Peoples=Backbone.Collection.extend({ initialize:function(models,options){ this.bind("add",options.view.addOnePerson);//add將Model添加進Collection,在這里調用View中定義的addOnePerson函數 } }); // 新建View構造函數 AppView=Backbone.View.extend({ el:$("body"), initialize:function(){ this.peoples=new Peoples(null,{view:this})//實例化一個Collection }, events:{ "click #check":"checkIn",//綁定#check的click事件,并執行checkIn函數 }, checkIn:function(){ var person_name=prompt("您的姓名是?"); if(person_name==""){ person_name="路人甲"; } var ctime=new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds(); var person=new People({name:person_name,ctime:ctime}); this.peoples.add(person); }, addOnePerson:function(model){ $("#person-list").append("<li>"+model.get('name')+"您好,您的打卡時間為:"+model.get('ctime')+"</li>"); } }); var appview=new AppView;//實例化一個View,自動執行initialize中的函數 })(jQuery) </script>

</html></code></pre>

動手實踐

本節從Model、Collection、View和Router四個部分分別講解。

Model

對于Model這一部分,其官網是這么說的:“Model是js應用的核心,包括基礎的數據以及圍繞著這些數據的邏輯:數據轉換、驗證、屬性計算和訪問控制”。這句話基本上高度概括了Model在一個項目中的作用。實際上,不僅僅是js應用,在任何以數據收集和處理的項目中Model都是很重要的一塊內容。

在web端,Model還有一個重要的功能就是和服務器端進行數據交互,就像是服務器端的程序需要和數據庫交互一樣。因此Model應該是攜帶數據流竄于各個模塊之間的東西。

所以說,Ajax操作,應該寫在Model層。

(function() {
  var Man = Backbone.Model.extend({
    defaults: {
      name: "張三",
      age: "38"
    },
    initialize: function() {
      //初始化時綁定監聽,change事件會先于validate發生
      this.bind("change:name", function() {
        var name = this.get("name");
        alert("你改變了name的屬性為:" + name);
      });
      this.bind("invalid", function(model, error) {
        alert(error);
      });
    },
    validate: function(attributes) {
      if (attributes.name === '') {
        return "name不能為空!";
      }
    },
    aboutMe: function() {
      return "我叫" + this.get("name") + ",今年" + this.get("age") + "歲";
    }
  });
  var man = new Man();
  alert(man.aboutMe());
  man.set({
    name: ''
  });
  man.save();//驗證
})();

model和服務器端的交互,調用save方法會post對象的所有屬性到server端,調用fetch時又會發送get請求到server端,接受數據和發送數據的格式均為json格式。

下一期更新Collection。

</code></code></div>

 本文由用戶 jxqog4473 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!