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.          addOne: function(todo) {
  96.              var view = new TodoView({model: todo});
  97.              this.$("#todo-list").append(view.render().el);
  98.          },
  99.  
  100.          addAll: function() {
  101.              Todos.each(this.addOne);
  102.          },
  103.  
  104.          createOnEnter: function(e) {
  105.              if(e.keyCode == 13) {
  106.                  var value = this.input.val();
  107.  
  108.                  if(!value) return;
  109.  
  110.                  Todos.create({content: value});
  111.  
  112.                  this.input.val('');
  113.              }
  114.          }
  115.  
  116.      });
  117.  
  118.      window.App = new AppView;
  119.  
  120.  });

　　代码解读：对于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的更多相关文章

  1. 初尝Windows 下批处理编程

    本文叫“ 初尝Windows 下批处理编程”是为了延续上一篇“初尝 Perl”,其实对于博主而言批处理以及批处理编程早就接触过了. 本文包括以下内容 1.什么是批处理 2.常用批处理命令 3.简介批处 ...

  2. 初尝 Perl

    本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...

  3. seajs初尝 加载jquery返回null解决学习日志含示例下载

    原文地址:http://www.tuicool.com/articles/bmuaEb 如需demo示例,请点击下方链接下载: http://yunpan.cn/cVEybKs8nV7CF  提取码 ...

  4. .NET领域驱动设计—初尝(三：穿过迷雾走向光明)

    开篇介绍 在开始这篇富有某种奇妙感觉的文章之旅时我们先短暂的讨论一下关于软件开发方法论的简要: 纵观软件开发方法论,从瀑布模型.螺旋模型.RUP(统一软件开发过程).XP(极限编程).Agile(敏捷 ...

  5. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  6. 分布式设计《初尝memcached》

          之前听说过高性能的分布式缓存开源工具,但一直没有真正接触过,如今接触的产品中实用到过分布式缓存.所以决定一探到底.memcached是一个优秀的开源的分布式缓存工具.也是眼下比較火热的分布 ...

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

     .NET领域驱动设计—初尝(一:疑问.模式.原则.工具.过程.框架.实践) 2013-04-07 17:35:27 标签:.NET DDD 驱动设计 原创作品,允许转载,转载时请务必以超链接形式标明 ...

  8. Github原生CI/CD，初尝Github Actions

    Github 原生 CI/CD,初尝 Github Actions Intro Github 目前已经推出了自己的 CICD 服务 -- Github Actions,而且比微软的 Azure Dev ...

  9. golang快速入门（五）初尝web服务

    提示:本系列文章适合对Go有持续冲动的读者 初探golang web服务 golang web开发是其一项重要且有竞争力的应用,本小结来看看再golang中怎么创建一个简单的web服务. 在不适用we ...

随机推荐

  1. Cocos2d-JS动画

    与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画.场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画.帧动画帧动画就是按一定时间间隔.一定的顺序.一帧一帧地显示帧图片.我们的美工要为精灵 ...

  2. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  3. ios警告：Category is implementing a method which will also be implemented by its primary class 引发的相关处理

    今天在处理项目中相关警告的时候发现了很多问题,包括各种第三方库中的警告,以及各种乱七八糟的问题  先说说标题中的问题  Category is implementing a method which ...

  4. AMQ学习笔记 - 15. 实践方案：基于ActiveMQ的统一日志服务

    概述 以ActiveMQ + Log4j + Spring的技术组合,实现基于消息队列的统一日志服务. 参考:Spring+Log4j+ActiveMQ实现远程记录日志——实战+分析 与参考文章的比较 ...

  5. SQL学习备忘

    1.按照拼音首字母的正序或倒序排序 SELECT CREATOR_REALNAME FROM tableName ORDER BY NLSSORT(CREATOR_REALNAME, 'NLS_SOR ...

  6. tcp 和 udp 缓冲区的默认大小及设置【转】

    1. tcp 收发缓冲区默认值 [root@ www.linuxidc.com]# cat /proc/sys/net/ipv4/tcp_rmem   4096    87380   4161536 ...

  7. 将string转换成char*

    string 是c++标准库里面其中一个,封装了对字符串的操作  把string转换为char* 有3中方法:  1.data  如:  string str="abc";  ch ...

  8. builder-设计模式

    package com.wp.java.builder; import org.junit.Test; public class DoDoContactDemo { @Test public void ...

  9. 生成HTMLTestRunner测试报告的操作步骤——Python+selenium自动化

    HTMLTestRunner是Python标准库的unittest模块的一个扩展,具体操作如下 1.安装 环境:Window8 步骤:1)http://tungwaiyip.info/software ...

  10. 字符串反转（charat）

    package com.java1234.chap03.sec08; public class zifufanzhuan { public static void main(String[] args ...