初尝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
<!doctype html>
<html>
<head>
<title>index</title>
<style type="text/css">
ul {
list-style-type: none;
}
#todo-list .done .todo-content {
text-decoration: line-through;
color: rgb(119, 119, 119);
}
.todo .todo-content {
display: inline;
}
</style>
<script src="./lib/json2.js"></script>
<script src="./lib/jquery.js"></script>
<script src="./lib/jquery.tmpl.js"></script>
<script src="./lib/underscore.js"></script>
<script src="./lib/backbone.js"></script>
<script src="./lib/backbone.localstorage.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<div id="todoapp">
<div class="title">
<h1>Todos</h1>
</div> <div class="content">
<div id="create-todo">
<input id="new-todo" value="" placeholder="what needs to be done?" type="text"/>
</div> <div id="todos">
<ul id="todo-list"></ul>
</div>
</div>
</div> <!-- template -->
<script type="text/template" id="item-template">
<div class="todo {{if done}}done{{/if}}">
<div>
<input class="check" type="checkbox" {{if done}}checked="checked"{{/if}} />
<div class="todo-content">${content}</div>
</div>
</div>
</script>
<!-- template ---> </body>
</html>
main.js
jQuery(function($) {
/*
*model部分
*/
window.Todo = Backbone.Model.extend({
defaults: {
done: false
},
toggle: function() {
this.save({done: !this.get("done")});
}
});
/*
*collection部分
*/
window.todoList = Backbone.Collection.extend({
model: Todo,
localStorage: new Store("todos"),
done: function() {
return this.filter(function(todo){return todo.get("done");});
},
remaining: function() {
return this.without.apply(this,this.done);
}
});
/*
*创建一个全局范围的集合实例
*/
window.Todos = new todoList;
/*
*绑定模型的change事件，并且当事件发生的时候渲染模板
*/
window.TodoView = Backbone.View.extend({
tagName: "li",
template: $("#item-template").template(),
events: {
"change .check": "toggleDone"
},
initialize: function() {
//确保在正确的作用域调用函数
_.bindAll(this,"render","close","remove");
this.model.bind("change",this.render);
this.model.bind("destroy",this.remove);
},
render: function() {
//console.log(this.model);
var element = jQuery.tmpl(this.template, this.model.toJSON());
$(this.el).html(element);
return this;
},
toggleDone: function() {
this.model.toggle();
}
});
/*
*负责顶层DOM
*/
window.AppView = Backbone.View.extend({
el: $("#todoapp"),
events: {
"keypress #new-todo": "createOnEnter"
},
initialize: function() {
_.bindAll(this,"addOne","addAll","render");
this.input = this.$("#new-todo");
Todos.bind("add",this.addOne);
Todos.bind("refresh",this.addAll);
Todos.bind('all',this.render);
Todos.fetch();
},
addOne: function(todo) {
var view = new TodoView({model: todo});
this.$("#todo-list").append(view.render().el);
},
addAll: function() {
Todos.each(this.addOne);
},
createOnEnter: function(e) {
if(e.keyCode == 13) {
var value = this.input.val();
if(!value) return;
Todos.create({content: value});
this.input.val('');
}
}
});
window.App = new AppView;
});
代码解读：对于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中。在代码中加入
console.log("就是一条记录：" + this.template, this.model.toJSON());
console.log("集合记录： " + Todos.length);
初尝backbone的更多相关文章
- 初尝Windows 下批处理编程
本文叫“ 初尝Windows 下批处理编程”是为了延续上一篇“初尝 Perl”,其实对于博主而言批处理以及批处理编程早就接触过了. 本文包括以下内容 1.什么是批处理 2.常用批处理命令 3.简介批处 ...
- 初尝 Perl
本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...
- seajs初尝 加载jquery返回null解决学习日志含示例下载
原文地址:http://www.tuicool.com/articles/bmuaEb 如需demo示例,请点击下方链接下载: http://yunpan.cn/cVEybKs8nV7CF 提取码 ...
- .NET领域驱动设计—初尝(三：穿过迷雾走向光明)
开篇介绍 在开始这篇富有某种奇妙感觉的文章之旅时我们先短暂的讨论一下关于软件开发方法论的简要: 纵观软件开发方法论,从瀑布模型.螺旋模型.RUP(统一软件开发过程).XP(极限编程).Agile(敏捷 ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 分布式设计《初尝memcached》
之前听说过高性能的分布式缓存开源工具,但一直没有真正接触过,如今接触的产品中实用到过分布式缓存.所以决定一探到底.memcached是一个优秀的开源的分布式缓存工具.也是眼下比較火热的分布 ...
- .NET领域驱动设计—初尝(一：疑问、模式、原则、工具、过程、框架、实践)
.NET领域驱动设计—初尝(一:疑问.模式.原则.工具.过程.框架.实践) 2013-04-07 17:35:27 标签:.NET DDD 驱动设计 原创作品,允许转载,转载时请务必以超链接形式标明 ...
- Github原生CI/CD，初尝Github Actions
Github 原生 CI/CD,初尝 Github Actions Intro Github 目前已经推出了自己的 CICD 服务 -- Github Actions,而且比微软的 Azure Dev ...
- golang快速入门（五）初尝web服务
提示:本系列文章适合对Go有持续冲动的读者 初探golang web服务 golang web开发是其一项重要且有竞争力的应用,本小结来看看再golang中怎么创建一个简单的web服务. 在不适用we ...
随机推荐
- HTML+CSS学习笔记 (14) - 单位和值
标签:HTML+CSS 颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命 ...
- iOS中关于.pch的新建与配置问题
以前版本的Xcode新建一个项目都会自动生成.pch,这个文件的好处是,里面添加的东西会自动添加到每个类中,也就是说我们可以把要用的宏定义,和多个头文件等放到.pch中,这样我们就不需要重复的在每个类 ...
- 理解C#系列 / 核心C# / 枚举
枚举 如果没有枚举 //1代表s号:2代表m号:3代表l号:4代表XL号:5代表XXL号 ; ){ //快递发M号的衣服 } 有了枚举之后 声明枚举(请原谅我使用了中文汉字) public enum ...
- (转)Yale CAS + .net Client 实现 SSO（6）
第一部分:安装配置 Tomcat 第二部分:安装配置 CAS 第三部分:实现 ASP.NET WebForm Client 第四部分:实现基于数据库的身份验证 第五部分:扩展基于数据库的身份验证 第六 ...
- jquery里用each遍历的值存到数组和字符串
$("img").each(function(){ var a = $(this).attr("src"); }); //遍历后存放到数组中..要用的时候再根据 ...
- 反射-Reflect
1.得到一份Class(同一个类在JVM中只有一份字节码) 三种方式:类名.class, Class.forName("全限定名");, 对象.getClass(); 基本类型 i ...
- 3月3日(5) Roman to Integer
原题 Roman to Integer 题意很简单,把Roman字母翻译成int. 实现方式也不难,针对每个字符转成int,从右往左,依次判断,如果当前值比上一个值大则相加,小则相减. 什么,你问我怎 ...
- 而在Jquery中则使用$.map()、$.each()来操作数组
首先是普通的数组(索引为整数的数组): //$.map(arr,fn); //对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 var arr = [9, 8, 7 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- elr_memory_pool详解
Preface Usually, memory allocation of OS is fast, especially the computer has just started. But over ...