首页 > 代码库 > Backbone入门——开发第一个Backbone页面

Backbone入门——开发第一个Backbone页面

2024-07-03 01:22:15   228人阅读

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="http://www.mamicode.com/">

        <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="http://www.mamicode.com/styles.css">
        -->
        <script src="http://www.mamicode.com//js/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="http://www.mamicode.com//js/underscore.min.js" type="text/javascript"></script>
        <script src="http://www.mamicode.com//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 = http://www.mamicode.com/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 = http://www.mamicode.com/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”的页面元素中。


联系
我们