首頁 > 開發者 > JavaScript
backbone.js提供了一套web開發的架構，通過Models進行key-value綁定及custom事件處理,通過Collections提供一套豐富的API用於枚舉功能,通過Views來進行事件處理及與現有的Application通過RESTful JSON介面進行互動.它是基於jquery和underscore的一個js架構。主要組成：1.model：建立資料，進行資料驗證，銷毀或者儲存到伺服器上2.collection：可以增加元素，刪除元素，擷取長度，排序，比較等一系列工具方法，說白了就是一個儲存 models的集合類3.view：綁定html模板，綁定介面元素的事件，初始的渲染，模型值改變後的重新渲染和介面元素的銷毀等優勢：1. 將資料和介面很好的分離開來。2. 將事件的綁定很好的剝離出來，便於管理和迭代。3. 使得Javascript程式的模組化更加清晰、明了。應用情境：最適合的應用情境是單頁面應用，並且頁面上有大量資料模型，模型之間需要進行複雜的資訊溝通。 簡單的一個Hello World執行個體 複製代碼 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello World</title> 5 </head> 6 <body> 7 <button id="btncheck">測試一下</button> 8 <ul id="world-list"> 9 </ul>10 </body>11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>12 <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>13 <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>14 15 <script>16 (function ($) {17 var World = Backbone.Model.extend({18 //建立一個World的對象，擁有name屬性19 name: null20 });21 22 var Worlds = Backbone.Collection.extend({23 //World對象的集合24 model:World25 });26 27 var objWorlds = new Worlds();//初始化一個collection對象28 objWorlds.bind("add", function(World) {//註冊監聽事件29 $("#world-list").append("<li>使用者 <b>" + World.get('name') + "</b> 對你說：hello world！</li>"); 30 });31 32 var WorldView = Backbone.View.extend({33 el: $("body"),34 events: {35 "click #btncheck": "checkIn", //事件綁定，綁定Dom中id為check的元素36 },37 checkIn: function () {38 var world_name = prompt("你叫什名字?");39 if(world_name == "") world_name = 'None';40 var world = new World({ name: world_name });41 objWorlds.add(world);42 }43 });44 //執行個體化AppView45 var objWorldView = new WorldView();46 })(jQuery);47 </script>48 </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
