原文 Build a Contacts Manager Using Backbone.js: Part 1

在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建一个完整的联系人管理应用.

我们会看到如何使用Underscore.js的一些基本组件方便的来展现出Backbone.js的方法.

这些库都是什么?

Backbone.js是一个Javascript的前端的MVC架构

Underscore.js是一个工具集,他对Javascript功能进行了一些增强.并且扩展了array,collection,function和object

的方法.

JQuery就不用多介绍.

那么开始吧

我们首先要创建一个根目录,然在根目录下创建子目录包含css,img,和js来存储相关文件.

完成后根目录下创建一个html文件内容如下:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Backbone.js Web App</title>
<link rel="stylesheet" href="css/screen.css" />
</head>
<body>
<div id="contacts"></div>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/Underscore-min.js"></script>
<script src="js/Backbone-min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Backbone.js仅仅依赖Underscore.js但是我们这个项目还需要用到Jquery,另外我们的程序代码会单独写在app.js

另外我们项目样式表会写在screen.css里.

Backbone.js 来自 http://backbonejs.org/

Underscore-min.js来自 http://underscorejs.org/

我们创建了这个应用的骨架,接下来我们会在这系列教程中逐渐完善它.打开app.js写入下面的内容.

(function ($) {

    var contacts = [
{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
{ name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
{ name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
{ name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
{ name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
{ name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }
]; } (jQuery));

我们把所有的代码都放在一个匿名立即执行函数内.  并且把JQuery以别名$为参数传送给匿名函数. 并且定义一个数组对象,每条记录对应一个联系人.

我们的教程使用这些本地数据,这样我们可以先不考虑数据和服务器同步的问题. 这些将来再去解决.

Models

在数组后面我们开始定义这个应用的数据模型model了.请把这段代码加在数组的后面. 但仍旧是在闭包里.

var Contact = Backbone.Model.extend({
defaults: {
photo: "/img/placeholder.png"
}
});

模型model是对一个应用的数据类型的描述. 例如姓名,年龄,等等.使用Backbone.js创建model的方法就是使用Backbone.Model类的extend()

方法来扩展新的model; 我们可以添加新的属性来扩展我们自定义model的功能.这里我们添加了defaults属性来定义新的model的缺省值.

在这个例子里我们为每个model定义了缺省的photo属性. 任何没有定义photo属性的model将会使用这个缺省属性的值.

每个model初始化后都会调用initialize()方法, 这里我们暂时没用用到. 没关系.后面我们还会再来修改model的.

Collections

集合是用来管理一组model的,在这里我们定义一个Dirctory来存储所有的Contacts.Collection的model就是Contact.我们把下面的

代码添加到Model定义的后面. 同样是闭包内.

var Directory = Backbone.Collection.extend({
model: Contact
});

(太麻烦了,后面不会逐句翻译了,原文有点罗嗦,我觉得)同样Collection来自Backbone.Collection.extend();

model属性可以告诉集合,集合内管理的是什么类型的数据. 虽然现在看起来简单.不用担心教程后面会继续扩展

它的定义.

Views

View就是负责在应用程序中显示数据的.它能够把数据处理和数据显示分离开. 这样当部分代码需要修改的时候

不会影响其他的部分.我们这个应用程序需要两个视图,第一个直接加在Directory的后面.

var ContactView = Backbone.View.extend({
tagName: "article",
className: "contact-container",
template: $("#contactTemplate").html(), //定义模板位置 render: function () {
var tmpl = _.template(this.template); //把模板内的html放在<article className="contact-container"></article>里. this.$el.html(tmpl(this.model.toJSON())); //用model的值替换模版内令牌.
return this;
}
});

这个view处理单独的一个Contact. 和model还有collection一样. view扩展自Backbone.View的extend()方法.

这个单独Contact的view定义了用来展示Contact的DOM(article),DOM的类"contact-container"(css定义用到)

以及用JQuery的方法定位模版(#contactsTemplate),它还有一个属性render执行一个函数.用来渲染View但是这个例子里

我们没有定义initialize()方法也没有在initialize()里调用render(),所以不会自动的渲染Contact视图.

标签的属性className.

使用Underscore的微模版

将以下代码加到index.html联系人Contact的<div>标签后面

<script id="contactTemplate" type="text/template">
<img src="<%= photo %>" alt="<%= name %>" />
<h1><%= name %><span><%= type %></span></h1>
<div><%= address %></div>
<dl>
<dt>Tel:</dt><dd><%= tel %></dd>
<dt>Email:</dt><dd><a href="mailto:<%= email %>"><%= email %></a></dd>
</dl>
</script>

我们用了一个带id属性的<script>标签这样可以很容易的选中它. 另外在给这个标签添加一个type="text/template"使它浏览器

不会被执它.在模版内我们可以定义自己想要的html并且在需要显示数据的地方使用嵌套<%=%>来展现数据.

一个主视图

我们当前的视图仅仅描述一个单独联系人Contact,而且我们还没有调用它自身的渲染方法. 而且我们现在需要一个总的

联系人集合(Directory)的视图,把这段代码加到 app.js的ContactView定义后面.

var DirectoryView = Backbone.View.extend({
el: $("#contacts"),                  //最终展示view的DOM元素<div id="contacts"></div> initialize: function () {              //视图初始化完成后执行的函数
this.collection = new Directory(contacts); //用最开始初始化的数组作为数据源初始化视图的集合.
this.render();                  //调用视图自己渲染方法渲染自己.
}, render: function () {
var that = this;
_.each(this.collection.models, function (item) { //循环视图关联的集合
that.renderContact(item);            //渲染每个Contact
}, this);
}, renderContact: function (item) {             //渲染单独一个Contact调用的方法
var contactView = new ContactView({         //定义每个单独的Contact小View
model: item
});
this.$el.append(contactView.render().el); //渲染单独的Contact并追加到主View里
}
});

主视图负责将Directory中的每个Contact都渲染出来.我们仅仅要做的将主视图初始化就可以做到这个功能.

在DirectoryView定义后加入下面代码:

var directory = new DirectoryView();

定义好screen.css

.contact-container { width:400px; padding:10px; border:1px solid #aaa; margin:0 10px 10px 0; float:left; font-family:sans-serif; color:#333; background-color:#eee; }
.contact-container h1 { margin:; font-weight:normal; }
.contact-container h1 span { float:right; font-size:14px; line-height:24px; font-weight:normal; }
.contact-container img { border-width:1px; border-style:solid; border-color:#fff; border-right-color:#aaa; border-bottom-color:#aaa; margin-right:10px; float:left; }
.contact-container div { margin-bottom:24px; font-size:14px; }
.contact-container a { color:#333;}
.contact-container dl { margin:; float:left; font-size:14px; }
.contact-container dt, .contact-container dd { margin:; float:left; }
.contact-container dt { width:50px; clear:left; }

完成保存后,从浏览器打开index.html代码看到:

(实际上我用IE11是不行,显示的是一纵列没有样式的Contact.只有在FireFox和chrome可以正常显示.大概是部分css不支持的问题.)

总结

这部分教程我们介绍了Backbone.js的核心组件model,collection,还有view. model存储应用数据,和定义一些特别的行为.collection是用来

管理model的集合. view的作用是渲染和展示model中的数据.

下次的教程我们要学习怎么从集合中过滤部分model数据. 还有学习Backbone.js的另外一个重要组件route

补充placeholder.png

项目的源代码可以从这里下载:

http://cdn.tutsplus.com/net/uploads/legacy/1142_bb1/demo.zip

用Backbone.js创建一个联系人管理系统(一)的更多相关文章

  1. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  2. 用Backbone.js创建一个联系人管理系统(四)

    原文: Build a Contacts Manager Using Backbone.js: Part 4 这一系列教程的第四部分,教我们如何完成对已经存在的Contacts进行编辑和保存. 本教程 ...

  3. 用Backbone.js创建一个联系人管理系统(二)

    欢迎大家回来继续这一教程,第一部分我们学习了model,collection和view在Backbone中的 基本用法,还有怎么样用主视图去绑定collection去渲染出每个Contact. 这部分 ...

  4. 用Backbone.js创建一个联系人管理系统(三)

    原文: Build a Contacts Manager Using Backbone.js: Part 3 欢迎回到这系列的教程,关注使用Backbone.js构建应用程序. 如果你还没看过第一,二 ...

  5. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  6. 用three.js创建一个简易的天空盒

    本文创建的天空盒是用六张图片来创建的.笔者会论述两种方法来创建,都是最简单基本的方法,不涉及着色器的使用.一种是创建一个盒子,然后将图片作为盒子6个面的纹理贴上来创建.另一种则是简单的将纹理作为场景的 ...

  7. JS创建一个数组1.求和 2.求平均值 3.最大值 4.最小值 5.数组逆序 6.数组去重 0.退出

    rs = require("readline-sync"); let arr = []; console.log("请输入数组的长度:"); let arr_l ...

  8. 用Backbone.js教程系列的链接

    整理了一下用Backbone.js系列教程链接. Backbone.js入门教程 用Backbone.js创建一个联系人管理系统(一) 用Backbone.js创建一个联系人管理系统(二) 用Back ...

  9. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

随机推荐

  1. AIX下安装bash

    在AIX系统下,默认是没有安装bash环境的,对于经常操作的维护人员来说,非常不方便,所以下面我们来动手安装bash. 1.确认系统是否已安装bash 方法1:之间敲bash命令,若提示没有此命令则没 ...

  2. (五) openwrt打包过程

    标签(空格分隔): Makefile 本周是成胖子每周一博第六周,更好地阅读体验,请点击这里 前言 前面我们已经讲了openwrt编译的大部分过程,包括大致的编译步骤,ipk的编译等.今天是我这个系列 ...

  3. BS与CS的联系与区别

    C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或SQL Server.客户端需要安装专用的客 ...

  4. Bzoj 1726: [Usaco2006 Nov]Roadblocks第二短路 dijkstra,堆,A*,次短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 969  Solved: 468[S ...

  5. 安装ipvsadm报错

    server环境: [vagrant@localhost download]$ uname -a Linux RS1 2.6.18-238.el5 #1 SMP Thu Jan 13 15:51:15 ...

  6. 最新版redis的安装及配置 linux系统

    1.redis下载 官网地址:https://redis.io/download 百度云地址:链接:http://pan.baidu.com/s/1c1Hu2gK 密码:h17z 2.解压 [root ...

  7. Vue还有这种操作?浅析几个新手常常忽略的API

    一:实现子组件与父组件双向绑定的"sync": 一般来说,我们实现父子组件值的传递通常使用的是[props]和自定义事件[$emit].父组件通过[props]将值传给子组件,子组 ...

  8. 【java设计模式】(6)---迭代器模式(案例解析)

    设计模式之迭代器模式 一.java迭代器介绍 1.迭代器接口 在jdk中,与迭代器相关的接口有两个:Iterator 与 Iterable. Iterator:迭代器,Iterator及其子类通常是迭 ...

  9. CMDB服务器管理系统【s5day88】:采集资产-文件配置(二)

    上节疑问: 1.老师我们已经写到global_settings里了,为什么还要写到__init__.py setting 这的作用是为了:整合起两个的组合global_settings和setting ...

  10. eslint的安装与使用

    什么是 ESLint ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.js 编写,由 Nicholas C. Zakas 于 2013 年 6 月创建.ESL ...