初尝backbone

  backbone的基础知识在此将不再进行介绍。自己后续应该会整理出来,不过今天先把这几天学的成果用一个demo进行展示。

  后续可运行demo将会在sinaapp上分享,不过近期在整理sinaapp上demo分享版块的重构,恕不能及时更新上去。

  手把手教你搭建Hello
World

  虽然这次的开篇程序叫做helloworld有点牵强,但是我还是喜欢叫它为hello world~^_^

  以下程序改编自著名的todos程序,todos是什么?其实如果学过backbone的,肯定看到过todos的实例,网上对todos分析也不少。那我为什么要对ta进行改编呢?我觉得,不论学习什么新的东西,从简单的东西中能够看到本质,才是学习的入口点。其实我是打着改编的旗号,只是在不影响反映backbone本质的前提下,把代码写得简洁简洁再简洁一些,然后本质的东西浮出水面=。=叫做helloworld,~just
joking^_^

  对于外部引入的代码文件不再赘述,可以查看图片(你可以留意下路径,对于html中路径的书写有影响)

  然后下面主要是对index.html代码和main.js文件进行解析,当然重头戏肯定是main.js

  index.html


 1 <!doctype html>
2 <html>
3 <head>
4 <title>index</title>
5 <style type="text/css">
6 ul {
7 list-style-type: none;
8 }
9 #todo-list .done .todo-content {
10 text-decoration: line-through;
11 color: rgb(119, 119, 119);
12 }
13 .todo .todo-content {
14 display: inline;
15 }
16 </style>
17 <script src="./lib/json2.js"></script>
18 <script src="./lib/jquery.js"></script>
19 <script src="./lib/jquery.tmpl.js"></script>
20 <script src="./lib/underscore.js"></script>
21 <script src="./lib/backbone.js"></script>
22 <script src="./lib/backbone.localstorage.js"></script>
23 <script src="./js/main.js"></script>
24 </head>
25 <body>
26 <div id="todoapp">
27 <div class="title">
28 <h1>Todos</h1>
29 </div>
30
31 <div class="content">
32 <div id="create-todo">
33 <input id="new-todo" value="" placeholder="what needs to be done?" type="text"/>
34 </div>
35
36 <div id="todos">
37 <ul id="todo-list"></ul>
38 </div>
39 </div>
40 </div>
41
42 <!-- template -->
43 <script type="text/template" id="item-template">
44 <div class="todo {{if done}}done{{/if}}">
45 <div>
46 <input class="check" type="checkbox" {{if done}}checked="checked"{{/if}} />
47 <div class="todo-content">${content}</div>
48 </div>
49 </div>
50 </script>
51 <!-- template --->
52
53 </body>
54 </html>

  main.js


  1 jQuery(function($) {
2 /*
3 *model部分
4 */
5 window.Todo = Backbone.Model.extend({
6 defaults: {
7 done: false
8 },
9
10 toggle: function() {
11 this.save({done: !this.get("done")});
12 }
13 });
14
15 /*
16 *collection部分
17 */
18 window.todoList = Backbone.Collection.extend({
19 model: Todo,
20
21 localStorage: new Store("todos"),
22
23 done: function() {
24 return this.filter(function(todo){return todo.get("done");});
25 },
26
27 remaining: function() {
28 return this.without.apply(this,this.done);
29 }
30
31 });
32
33 /*
34 *创建一个全局范围的集合实例
35 */
36 window.Todos = new todoList;
37
38 /*
39 *绑定模型的change事件,并且当事件发生的时候渲染模板
40 */
41 window.TodoView = Backbone.View.extend({
42 tagName: "li",
43
44 template: $("#item-template").template(),
45
46 events: {
47 "change .check": "toggleDone"
48 },
49
50 initialize: function() {
51 //确保在正确的作用域调用函数
52 _.bindAll(this,"render","close","remove");
53
54 this.model.bind("change",this.render);
55 this.model.bind("destroy",this.remove);
56 },
57
58 render: function() {
59 //console.log(this.model);
60 var element = jQuery.tmpl(this.template, this.model.toJSON());
61 $(this.el).html(element);
62
63 return this;
64 },
65
66 toggleDone: function() {
67 this.model.toggle();
68 }
69
70 });
71
72 /*
73 *负责顶层DOM
74 */
75 window.AppView = Backbone.View.extend({
76
77 el: $("#todoapp"),
78
79 events: {
80 "keypress #new-todo": "createOnEnter"
81 },
82
83 initialize: function() {
84 _.bindAll(this,"addOne","addAll","render");
85
86 this.input = this.$("#new-todo");
87
88 Todos.bind("add",this.addOne);
89 Todos.bind("refresh",this.addAll);
90 Todos.bind(‘all‘,this.render);
91
92 Todos.fetch();
93 },
94
95
96 addOne: function(todo) {
97 var view = new TodoView({model: todo});
98 this.$("#todo-list").append(view.render().el);
99 },
100
101 addAll: function() {
102 Todos.each(this.addOne);
103 },
104
105 createOnEnter: function(e) {
106 if(e.keyCode == 13) {
107 var value = this.input.val();
108
109 if(!value) return;
110
111 Todos.create({content: value});
112
113 this.input.val(‘‘);
114 }
115 }
116
117 });
118
119 window.App = new AppView;
120
121 });

  代码解读:对于main.js我们可以理解为三部分:model、collection、view,当然不要理解为这是MVC的缩写来源,MVC中的C的缩写来自control,只是这里没有用到,控制器本质上路由和函数(在此不再展开,因为之后将会在介绍backbone细节的文章中展开)。~在main.js中,model、collection、view三者是如何协调工作的呢?

  以上代码阅读理解起来并不难。~我可以用我自己的话来讲下整个应用。

  collection,我喜欢把它叫做“一个模型的collection”。我觉得也可以这么理解"用通俗话讲就是,collection可以理解为一个容器,容器中可以放东西,这里的东西就是你定义的模型。一个collection对应一个模型"。model和collection共同实现了模型层。如果将前端的MVC和后端的MVC进行联系,我们可以这么以为。M层的作用是为了实现数据的持久化存储和更新(对于更新会涉及到服务器通信,这里不再展开),数据持久化存储,与数据库在后台的作用像类似。我们定义的Backbone.model.extend就是相当于一张表,我们在后续代码中就是创建这张表的一个个实例,然后把实例扔给collection。不得不提一下的是,单纯的collection和model是没有持久化功能,你可以自己采取持久化策略:webSocket

、XML传输流或本地存储(HTML5
localstorage)。在上述代码中,我们采用了backbone.localStorage.js,实现loccalstorage。你可能会问,为什么要对数据进行持久?其实,还有重要的一点没有指出来,MVC到底是怎么进行工作的?当model和collection都准备就绪的时候,我们来看一下view部分。

  当我们在输入框中输入文本,单击回车,代码部分到底发生了什么呢?请看AppView中的createOnEnter函数,其中的Todos.create({content:value})就是相当于创建了一个类型为Todo模型的实例,并且把该实例添加到Todos集合中,这一步导致model的改变。model的改变触发了change事件,根据TodoView中函数的绑定,将会执行render函数,使用存储的模板来更新el。如果你通过console.log(this.template,
this.model.toJSON())。你会发现,输出的内容是一条记录,也就是刚刚创建的Todo模型的新实例。就是相当于后台中,一条新的更新记录。而所有记录则是保存在collection的实例Todos中。在代码中加入

1 console.log("就是一条记录:" + this.template, this.model.toJSON());
2 console.log("集合记录: " + Todos.length);

  

  

初尝backbone,布布扣,bubuko.com

时间: 2024-10-14 03:21:21

初尝backbone的相关文章

初尝Mcafee之在ePO中进行策略和客户端任务设置【06】

一.策略和客户端任务概述 在ePO中点击"菜单",可以看到一个策略的大分类:ePO就是通过分配策略和客户端任务给客户端代理,然后代理将这些策略和客户端任务分配给本地相应的Mcafee杀毒防护软件进行执行: 策略是针对软件的内在参数和计划任务的配置,例如VirusScan是否扫描压缩文件,VirusScan的扫描计划的设置: 客户端任务是针对软件的外在交互,例如安装,部署,更新,信息统计等: 二.策略和客户端任务的分配结构: 策略和客户端任务的分配结构有点跟Windows Server的

《iOS应用逆向工程》学习笔记(五)初尝越狱插件OpenSSH

首先在越狱机子上装上OpenSSH插件,然后查看设备的IP地址,这里假设为192.168.xxx.xxx. 然后用Mac上的Terminal通过Open SSH连接到设备上(初次登录密码是alpine,必须立即修改,否则任何人都可以连接到你的机子上搞破坏). 连接命令为:ssh [email protected]设备IP地址 修改密码命令为:passwd 例如: $ ssh [email protected] The authenticity of host '192.168.xxx.xxx (

Challenge Checkio(python)—初尝python练习网站

最近在找点python语言练习的网站,发现这个网站不错 http://www.checkio.org/ 页面设计的也比较漂亮,比较适合学习python的语法知识.不过注册这个网站 开始就得解决一个python问题,不过很简单. 1 #python3.3 is inside 2 def checkio(els): 3 return els 4 5 if checkio([1, 2, 3, 4, 5, 6]) == 6: 6 print('Done!') 对上面的代码 修改checkio中的函数 函

初尝Mcafee之CEE企业版概述【01】

Mcafee CEE企业版英文全称Mcafee Complete Endpoint Protection –Enterprise,是多种Mcafee的防护软件的套件: Mcafee CEE是C/S模式管理的,服务端控制端名为ePO,全称ePolicy Orchestrator;客户端是由Mcafee Agent和各类Mcafee防护软件组成. ePO通过Mcafee Agent来部署,安装,执行,管理,监控在客户端的Mcafee防护软件,其架构如下: (1)Mcafee EASI是ePO的安装套

seajs初尝 加载jquery返回null解决学习日志

原文地址:http://www.tuicool.com/articles/bmuaEb 今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘! 在GitHub发现了玉伯的说明 < 直接调用 jQuery 插件等非标准模块的方法 > 不过这方法在2.3版本貌似已经不行,seajs.modify方法已在这版本移除! https://github.c

AWS--EC2初尝

环境是Mac OSX. 尝试了一下amazon的EC2服务,注册基本比较简单,需要一张信用卡. 进入控制台后选择EC2,点击launch instance,选择free tier的Amazon linux,一路点下去.比较重要的是保存好key pair,之后连接主机需要.网上看是以.pem为后缀的,但我下下来是以.cer为后缀的,不过基本不影响. 等待主机启动好了之后可以连接了,在命令行切换到之前key所在路径,用chmod修改权限为400(只有所有者可读). 接着输入“ssh -i <key文

初尝 Perl

本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是Perl Perl 是一门由 Larry Wall(拉里·沃尔)设计并实现的一门脚本语言,Larry Wall设计这门语言的最初的目的为了让UNIX 上得报表处理工作变得更方便.Perl 第一版的发行时间为 1987年(Python第一版的发行时间为 1991年.Ruby第一版的发行时间为 1995

分布式设计《初尝memcached》

之前听说过高性能的分布式缓存开源工具,但一直没有真正接触过,现在接触的产品中有用到过分布式缓存,所以决定一探究竟.memcached是一个优秀的开源的分布式缓存工具,也是目前比较火热的分布式缓存的解决方案雏形.memcached的服务端产品本身功能简洁,简单易用,但是玩法多种多样.但是事实上它是一个"伪分布式"解决方案,它本身并没有实现服务端分布式(服务端的memcached server之间是不能通信的),所谓的分布式都是依靠客户端来实现,而目前市面上提供了客户端分布式实现的开源工具

.NET领域驱动设计—初尝(一:疑问、模式、原则、工具、过程、框架、实践)

.NET领域驱动设计—初尝(一:疑问.模式.原则.工具.过程.框架.实践) 2013-04-07 17:35:27 标签:.NET DDD 驱动设计 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wangqingpei557.blog.51cto.com/1009349/1173006 1.1.疑问 1.1.1.UML何用 1.1.2.领域建模 1.2.模式 1.3.原则 1.4.工具 1.5.过程 1.6.框架 1.7.项