1. 功能描述
在新建的html頁面中，通過導入的backbone文件搭建一個簡單的mvc結構。當用戶進入該頁時，id號為“divTip”的<div>元素中將顯示“hello,backbone!”字樣。
2. 實現代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Backbone Helloworld</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="<%=path %>/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="<%=path %>/js/underscore.min.js" type="text/javascript"></script> <script src="<%=path %>/js/backbone.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // 定義模型類 window.Test = Backbone.Model.extend({ defaults: { content: "" } }); // 創建集合模型類 window.TestList = Backbone.Collection.extend({ model: Test }); // 向模型添加數據 var data = new TestList({ content: "hello,backbone!" }); // 創建View對象 window.TestView = Backbone.View.extend({ el: $("body"), initialize: function() { $("#divTip").html(data.models[0].get("content")); } }); //實例化View對象 window.App = new TestView; }); </script> </head> <body> <div id="divTip"></div> </body> </html>
3. 頁面效果
執行代碼后的頁面效果如圖1-5所示。
4. 源碼分析
在本示例的頁面代碼中，首先在<head>元素中導入3個相應的庫文件，即jQuery框架、Backbone主框架和依賴庫Underscore。需要注意它們導入頁面的順序，由於代碼是按照自上而下的順序進行執行的，因此先導入jQuery框架文件；Backbone依賴於Underscore庫，因此在導入Underscore庫文件后，才導入Backbone主框架文件。
然后，在<script>元素中添加代碼，構建頁面的MVC結構。在代碼中，整體結構分成三大部分，通過大括號的方式對代碼進行划分並添加數字標記，下面分析每一部分的代碼。
// 定義模型類 window.Test = Backbone.Model.extend({ defaults: { content: "" } });
通過Backbone中的extend方法自定義一個Model層模型類“Test”。在該模型類中，使用“defaults”方式設置模型實例化時，將復制默認數據項“content”。在通常情況下，模型類中的默認數據項的值都為空，在實例化模型類時，才真正被實參所取代。如果要設置多個默認的數據項參數，可以用逗號進行隔開。這一部分主要是構建模型類，並設置一些默認數據項。
注意
在實例化模型類時，無論是否向每個已設置的默認數據項傳遞實參，這些默認數據項都將全部復制到這個實例化對象中。
// 創建集合模型類 window.TestList = Backbone.Collection.extend({ model: Test }); // 向模型添加數據 var data = new TestList({ content: "hello,backbone!" });
先通過Backbone中的extend方法自定義一個Collection層集合類“TestList”。在該集合類中，使用“model”方式聲明該集合類繼承了模型類“Test”。然后實例化一個集合類對象“data”。在實例化過程中，根據模型類中設置的默認數據項向集合類中添加對應的數據，即將content的實參設置為“hello,backbone!”。
// 創建View對象 window.TestView = Backbone.View.extend({ el: $("body"), initialize: function() { $("#divTip").html(data.models[0].get("content")); } });
先通過Backbone中的extend方法自定義一個View層視圖類“TestView”，在該視圖類中，將el屬性設置為“$("body")”，表明是針對整個頁面元素部分；接下來在定義的initialize()函數中，通過get方式獲取集合對象data中content數據項的值，即“hello,backbone!”字符串，並將該字符串內容顯示在ID號為“divTip”的頁面元素中。
最后，實例化一個視圖類對象App，代碼如下。
//實例化View對象 window.App = new TestView;
執行上述代碼之后，由於在視圖類中定義了initialize()函數，在創建一個新實例時，視圖類中的initialize()函數會自動被執行，即最終將“hello,backbone!”顯示在ID號為“divTip”的頁面元素中。