Backbone入门——开发第一个Backbone页面
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页面的更多相关文章
- React Native入门 开发第一个React Native应用
1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(tes ...
- ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- Backbone入门
Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...
- Backbone前端开发流程及规范
定好View 首先,根据页面切分View,切分View的规则是将重复利用的视图或者功能相近的视图归于一个View,对于Backbone,每一个model都要对应一个View.父层View负责布局,并将 ...
- Backbone入门教程
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
- Python开发入门与实战4-模板页面
4.Django基于模板页面 在前一章中,HTML是直接被硬编码在 Python views.py代码中,如下: from django.http import HttpResponse import ...
- Netty入门二：开发第一个Netty应用程序
Netty入门二:开发第一个Netty应用程序 时间 2014-05-07 18:25:43 CSDN博客 原文 http://blog.csdn.net/suifeng3051/article/ ...
- NAS星云链 入门之从零开发第一个DAPP
应该有很多小伙伴和我一样,一直想去入手学习区块链,但是总无从下手,有些概念感觉理解了,有感觉没理解.其实这都是“没实践”的锅. 所谓看十遍不如想一遍,想一遍不如做一遍.这不最近星云链nebulas正有 ...
随机推荐
- EXCEL工作表保护密码忘记了，如何撤消工作表保护？
按下面步骤操作,如果不会发邮件给我吧 SamRichard@live.cn 1\打开文件 2\工具---宏----录制新宏---输入名字如:aa 3\停止录制(这样得到一个空宏) 4\工具---宏-- ...
- Linux命令（1）- grep
1.grep 功能:查找文件里符合条件的字符串. 语法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数& ...
- calc()问题
什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc() 从字面我们可以把他理解为一个函数function.其 ...
- perl小记
perl是一种运行式脚本,所以在debug的时候,多用print,在后台看有没有输出相关的结果,来判断相应的错误. 部分perl正则表达式: $gene =~/^LOC/ 以“LOC”开头的字符串 ...
- JavaScript parseInt() toString()函数
parseInt(string, radix) string:必需.要被解析的字符串 radix:可选.表示要解析的数字的基数.该值介于 2 ~ 36 之间. 如果省略该参数或其值为 0,则数字将以 ...
- c++实战吐槽(我还是太年轻了)
习惯了用java, 现在切换到c++遇到了一些很滑稽的问题, 特此记录. 一. 使用了野指针 都知道不能使用野指针, 指针定义后,要初始化为null, 我在项目里面默认构造函数里面确实初始化为null ...
- 【Java学习笔记】<集合框架>对字符串进行长度排序
package 测试; import java.util.Comparator; public class ComparatorByLength implements Comparator { //定 ...
- （译）如何优化cocos2d程序的内存使用和程序大小：第二部分（完）
前言:从上周发布教程的微博反应情况来看,cocos2der们对于游戏的内存问题还是非常关心的.本文是上一篇博文的续,旨在教大家如何减少cocos2d程序的大小. 全文如下: 减少你的程序的大小 把纹理 ...
- 数据库知识整理<七>
组合查询: 7.1使用子查询: 嵌套在其他查询中的查询,我们称之为子查询.子查询本身也可能包含一个子查询.子查询也称为内部查询,而包含子查询的语句也称为外部查询. 所有的子查询可以被分为两个类别:子查 ...
- go protobuf 安装
1.https://github.com/google/protobuf/releases/tag/v3.0.0 下载需要的版本,如果执行autogen.sh的过程中出现autoreconf not ...