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”的页面元素中。

Backbone入门——开发第一个Backbone页面的更多相关文章

  1. React Native入门 开发第一个React Native应用

    1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(tes ...

  2. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  3. Backbone入门

    Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...

  4. Backbone前端开发流程及规范

    定好View 首先,根据页面切分View,切分View的规则是将重复利用的视图或者功能相近的视图归于一个View,对于Backbone,每一个model都要对应一个View.父层View负责布局,并将 ...

  5. Backbone入门教程

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  7. Python开发入门与实战4-模板页面

    4.Django基于模板页面 在前一章中,HTML是直接被硬编码在 Python views.py代码中,如下: from django.http import HttpResponse import ...

  8. Netty入门二：开发第一个Netty应用程序

    Netty入门二:开发第一个Netty应用程序 时间 2014-05-07 18:25:43  CSDN博客 原文  http://blog.csdn.net/suifeng3051/article/ ...

  9. NAS星云链 入门之从零开发第一个DAPP

    应该有很多小伙伴和我一样,一直想去入手学习区块链,但是总无从下手,有些概念感觉理解了,有感觉没理解.其实这都是“没实践”的锅. 所谓看十遍不如想一遍,想一遍不如做一遍.这不最近星云链nebulas正有 ...

随机推荐

  1. udp-->socket通信原理

    UDP数据通讯原理     UDP数据通讯分服务端(软件)和客户端端:     服务端(软件)(服务器)先运行,服务端,不需要事先知道客户端IP和port     客户端(软件)(客户端机器)后运行, ...

  2. 浅谈TCP/IP网络编程中socket的行为

    我认为,想要熟练掌握Linux下的TCP/IP网络编程,至少有三个层面的知识需要熟悉: 1. TCP/IP协议(如连接的建立和终止.重传和确认.滑动窗口和拥塞控制等等) 2. Socket I/O系统 ...

  3. vsftpd移植

    1.交叉编译 2.将生成的 vsftpd 复制到目标板 /usr/sbin 目录,vsftpd.conf 复制到目标板 /etc 目录,并添加 vsftpd 为可执行: 3.配置 使用 vi 打开 v ...

  4. 数据库的char(n)

    Mysql中的char(n)或者varchar(n) 其中的n就是代表列,不代表字节! varchar(n)其中的n最多是65535 , 应该在创建表的同时,指定表的编码方式为latin1,因为lat ...

  5. Oracle中改变表的Owner和tablespace

    初用Oracle,很多的不熟悉,建完库,没有建用户,也没创建表空间,就直接system用户建表添加数据,几个月过去,表建了近百个,数据添加了几万条,才越来越觉得这种方式缺点太多: 在PL/SQL中系统 ...

  6. 【kd-tree】bzoj2850 巧克力王国

    分四种情况讨论:a,b>=0 a,b<0 a>=0,b<0 a<0,b>=0 然后每次检验是否进入一个矩形框 或者 是否直接利用这个矩形框的答案 仅仅利用两个对角的 ...

  7. MySql自动分区

    自动分区需要开启MySql中的事件调度器,可以通过如下命令查看是否开启了调度器 show variables like '%scheduler%'; 如果没开启的话通过如下指令开启 ; 1.创建一个分 ...

  8. Python 中 sqlite3的使用

    Python 中 sqlite3的使用 一.sqlite安装 下载地址 http://www.sqlite.org 1.数据库生成 sqlite3.exe testdb 2.创建表格,插入数据 3.在 ...

  9. Android 开发必备

    Android 开发必备 http://www.androiddevtools.cn/ 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Android ...

  10. Activity之间的通信

    通常Activity之间的通信有三种方式:单向不传参数通信.单项传参数通信和双向通信. 这几种传递方式都需要通信使者Intent.以下将用代码来辅助理解. 1.单向不传递参数通信 public cla ...