Backbone标准例子——通讯录

ifconfig 2013-04-15

通讯录，一个基于Backbone的经典例子。

页面截图如下：

Backbone标准例子——通讯录
 

html代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Backbone通讯录</title>
  <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
</head>
<body>
  <header id="header"><h1>Backbone通讯录</h1></header>
  <article id="article"></article>
</body>
  <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/lib/underscore.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/lib/backbone.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/lib/backbone-localstorage.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/application.js" type="text/javascript" charset="utf-8"></script>

  <!-- 联系人 -->
  <script type="text/template" id="tpl-item">
      <%= (name ? name : "<i>无名</i>") %>
  </script>

  <!-- 左边的侧边条，包括联系人列表 -->
  <script type="text/template" id="tpl-sidebar">
    <header>
      <input type="search" placeholder="搜索" results="0" incremental="true" autofocus>
    </header>
    <div class="items"></div>
    <footer>
      <button>新建联系人</button>
    </footer>
  </script>

  <!-- 显示联系人详细信息 -->
  <script type="text/template" id="tpl-show">
    <header>
      <a class="edit">编辑</a>
    </header>
    <div class="content">
      <p><label>姓名：<%= name %></label></p>
      <p><label>邮箱：<%= email %></label></p>
    </div>
  </script>
  
  <!-- 编辑联系人信息 -->
  <script type="text/template" id="tpl-edit">
    <header>
      <a class="save">保存</a>
      <a class="delete">删除</a>
    </header>
    <div class="content">
      <form>
        <label>
          <span>姓名：</span>
          <input type="text" name="name" value="<%= name %>">
        </label>
        <label>
          <span>邮箱：</span>
          <input type="email" name="email" value="<%= email %>">
        </label>  
        <button>保存</button>
      </form>
    </div>
  </script>
</html>

Backbone代码如下：

(function($) {
  $(document).ready(function() {
    var Contact = Backbone.Model.extend({
      defaults: {
        name: '',
        email: ''
      },

      validate: function(attrs, options) {
        if (attrs.name == "") {
          return "用户名不能为空！";
        };
      },

      // 用户搜索的辅助方法
      filter: function(query) {
        if (typeof(query) === 'undefined' || query === null || query === '') return true;
        query = query.toLowerCase();
        return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;
      }
    });

    var Contacts = Backbone.Collection.extend({
      model: Contact,
      localStorage: new Store('my-contacts')
    });

    // 单个联系人视图
    var ContactItemView = Backbone.View.extend({
      className: 'item',
      template: _.template($('#tpl-item').html()),
      events: {
        'click': 'select'
      },

      initialize: function() {
        _.bindAll(this, 'select');
        this.model.bind('reset', this.render, this);
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
        if (this.model.view) this.model.view.remove();
        this.model.view = this;
      },

      // 渲染联系人
      render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
      },

      select: function() {
        appRouter.navigate('contacts/' + this.model.cid, {
          trigger: true
        });
      },

      active: function() {
        this.$el.addClass('active');
      },
      
      deactive: function() {
        this.$el.removeClass('active');
      }
    });

    // 左边的侧边条视图
    var SidebarView = Backbone.View.extend({
      className: 'sidebar',
      template: _.template($('#tpl-sidebar').html()),
      events: {
        'click footer button': 'create',
        'click input': 'filter',
        'keyup input': 'filter'
      },

      initialize: function() {
        _.bindAll(this, 'create', 'filter');
        this.model.bind('reset', this.renderAll, this);
        this.model.bind('add', this.add, this);
        this.model.bind('remove', this.remove, this);
      },

      // 渲染联系人列表
      render: function() {
        $(this.el).html(this.template());
        this.renderAll();
        return this;
      },

      renderAll: function() {
        this.$(".items").empty();
        this.model.each(this.renderOne, this);
        this.filter();
      },

      renderOne: function(contact) {
        var view = new ContactItemView({
          model: contact
        });
        this.$(".items").append(view.render().el);
      },

      create: function() {
        var contact = new Contact();
        this.model.add(contact);
        appRouter.navigate('contacts/' + contact.cid + '/edit', {
          trigger: true
        });
      },

      filter: function() {
        var query = $('input', this.el).val();
        this.model.each(function(contact, element, index, list) {
          contact.view.$el.toggle(contact.filter(query));
        });
        // this.model.last().view.$el.trigger("click")
      },

      active: function(item) {
        if (this.activeItem) this.activeItem.view.deactive();
        this.activeItem = item;
        if (this.activeItem) this.activeItem.view.active();
      },

      add: function(contact) {
        this.renderOne(contact);
      },

      remove: function(contact) {
        console.log(contact);
      }
    });
    // 显示选择的联系人详细信息
    var ShowView = Backbone.View.extend({
      className: 'show',
      template: _.template($('#tpl-show').html()),

      events: {
        'click .edit': 'edit'
      },

      initialize: function() {
        _.bindAll(this, 'edit');
      },

      render: function() {
        if (this.item) this.$el.html(this.template(this.item.toJSON()));
        return this;
      },

      change: function(item) {
        this.item = item;
        this.render();
      },

      edit: function() {
        if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {
          trigger: true
        });
      }
    });
    
    // 编辑选择的联系人
    var EditView = Backbone.View.extend({
      className: 'edit',
      template: _.template($('#tpl-edit').html()),

      events: {
        'submit form': 'submit',
        'click .save': 'submit',
        'click .delete': 'remove'
      },

      initialize: function() {
        _.bindAll(this, 'submit', 'remove');
      },

      render: function() {
        if (this.item) this.$el.html(this.template(this.item.toJSON()));
        return this;
      },

      change: function(item) {
        this.item = item;
        this.render();
      },

      submit: function() {
        this.item.set(this.form());
        this.item.save();
        appRouter.navigate('contacts/' + this.item.cid, {
          trigger: true
        });
        return false;
      },

      form: function() {
        return {
          name: this.$('form [name="name"]').val(),
          email: this.$('form [name="email"]').val()
        };
      },

      remove: function() {
        this.item.destroy();
        this.item = null;
        appRouter.navigate('', {
          trigger: true
        });
      }
    });

    // 主视图，显示和编辑联系人
    var MainView = Backbone.View.extend({
      className: 'main stack',
      initialize: function() {
        this.editView = new EditView();
        this.showView = new ShowView();
      },

      render: function() {
        this.$el.append(this.showView.render().el);
        this.$el.append(this.editView.render().el);
        return this;
      },

      edit: function(item) {
        this.showView.$el.removeClass('active');
        this.editView.$el.addClass('active');
        this.editView.change(item);
      },

      show: function(item) {
        this.editView.$el.removeClass('active');
        this.showView.$el.addClass('active');
        this.showView.change(item);
      }
    });

    // 整个页面的视图，管理SiderbarView和MainView两个子视图
    var AppView = Backbone.View.extend({
      className: 'contacts',

      initialize: function() {
        this.sidebar = new SidebarView({
          model: this.model
        });
        this.main = new MainView();
        this.vdiv = $('<div />').addClass('vdivide');
        this.model.fetch();
        this.render();
      },

      render: function() {
        this.$el.append(this.sidebar.render().el);
        this.$el.append(this.vdiv);
        this.$el.append(this.main.render().el);
        $('#article').append(this.el);
        return this;
      },

      show: function(item) {
        this.sidebar.active(item);
        this.main.show(item);
      },

      edit: function(item) {
        this.sidebar.active(item);
        this.main.edit(item);
      }
    });

    // 路由
    var AppRouter = Backbone.Router.extend({
      routes: {
        '': 'show',
        'contacts/:id': 'show',
        'contacts/:id/edit': 'edit'
      },

      show: function(id) {
        if (id != undefined) {
          appView.show(this.getContact(id));
        } else {
          appView.show(contacts.first());
        }
      },

      edit: function(id) {
        appView.edit(this.getContact(id));
      },

      getContact: function(id) {
        return contacts.getByCid(id);
      }
    });

    var contacts = new Contacts();
    window.appView = new AppView({
      model: contacts
    });
    window.appRouter = new AppRouter();
    Backbone.history.start();
  });
})(jQuery);

 最后，附上源代码。

ifconfig

ifconfig

相关推荐

RequireJS和Backbone的集成

有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AM

Chasingsun / 0评论 2013-05-16

javascript一些框架库和工具

最新版本的框架和库通常具有最好的跨浏览器和跨设备的支持。Angular 的人气非常高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷

iViOLeTi / 0评论 2016-01-18

backbone中的model实例[验证部分更新1.0.0]

下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西。</html>下面的代码需要填到这个html的script标签中的function中。var man = new Man;这个就很简单了，在hellowor

Chydar / 0评论 2014-07-22

Backbone中的RESTful持久化

bookshelf.create; 3 从服务端删除数据

85274652 / 0评论 2014-07-13

backbone实例Todo源码赏析

return todo.get;//使用order作为排序基准。'keypress .edit' : 'updateOnEnter',//双击编辑后，按enter键 编辑成功

涓涓溪流 / 0评论 2014-07-06

冗余换性能-从Backbone的triggerEvents说开了去

Backbone是一个优秀的前端MVC库，它的代码质量必定可靠。阅读过程中发现了函数triggerEvents有点意思，初看会以为一些代码是多余的。var ev, i = -1, l = events.length, a1 = args[0], a2 =

ififg / 0评论 2014-02-19

透过源码学前端 之 Backbone 三 Model

但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件，如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。代码详细解释就不贴了，看起来也不方便，

芋道源码 / 0评论 2013-07-03

js 写中国象棋游戏_应用backbone、canvas

前段时间做了个跳棋，网友反馈功能还好，但棋子跳较简单，且可玩性不高。建议可以做个象棋看看。于是上周日写了这个游戏，画面未用图片，美观差了些。依然使用backbone框架管理MVC，目的交流backbone的使用及二部分。下载附件包，使用chrome浏览器运

蒲厷渶戀 / 0评论 2013-07-02

透过源码学前端 之 Backbone 一

机缘之下，11年4月从设计转型专职做前端，经过半年的摸索、迷惑 和 知识储备，11年12月 开始通过学习框架的源码来学习js。最初学习的是ext 3.4.0，公司前端组主要是对ext进行二次封装的组件开发。最初因起点太低而步履维艰，其中ext_base里的

Raindan / 0评论 2013-06-24

和其他库（jquery,backbone）一起使用react

react 可以被用在任何的web 应用中。这篇文章将会从一些常用的使用场景入手，重点会关注与jQuery 和backbone 的交互。但是里面的思想在我们和其他库交互时都是可以被参考的。和操纵DOM的插件的交互react 感知不到它管理之外的dom 的变

Gcalolin / 0评论 2019-06-25

RequireJS和Backbone的集成

有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AM

lancelotlewis / 0评论 2013-05-16

JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember

选择JavaScript MVC框架很难。一方面要考虑的因素非常多，另一方面这种框架也非常多，而要从中选择一个合适的，还真得费一番心思。我用过其中4个框架：Angular、Backbone、CanJS和Ember。因此，可以对它们作一比较，供大家参考。本文

linkincsdn / 0评论 2013-05-06

Backbone及Underscore源码解析

最近一直在关注Backbone，工作之余将Backbone和Underscore库的源码逐行解析了一遍，并加入了完整的备注，我觉得已经足够详细，阅读它们可以帮助你快速了解Underscore和Backbone的内部实现。解析及备注后的源码，请从本文的附件中

我与大象的故事 / 0评论 2013-04-17

Backbone入门指南（二）：依赖库Underscore

Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。它本身与我们介绍的主题“Backbone”没有半毛钱的关系，因此你可以完全不理会“Backbone”的概念来学习它，或将它单独运用到任何一个页面。（另外，Underscor

VitaLemon / 0评论 2012-12-15

Backbone源码研究 - Backbone.Model

};很简单的代码，做了一些初始化赋值的事情。用到了一个小技巧 attrs = _.defaults; 来防止误传入的 undefined 覆盖掉默认的 defaults 值。Backbone 的精粹都在 set(){} 这个函数里面。

大黑 / 0评论 2019-06-21

Backbone.js选型使用分析

Backbone是一款很不错的轻量级的提供前端MVC模型编程的解决方案，其提供的Model,View,Controller等接口可以帮我们很清晰的从一大堆海量代码中解脱出来，Backbone本身就体积很轻有个4K-5K的样子，依赖也很少，只有一个under

汤姆猴 / 0评论 2012-11-12

backbone与php交互

backbone通过save保存数据到服务器端，通过fetch从服务器端获取数据。两者执行时都会调用sync函数，而不会执行服务器端操作。因此，除非是自定义的sync操作，否则不需要覆盖sync函数。save默认提交的是post方式，application

书弋江山 / 0评论 2012-10-17

使用 Yeoman 生成 backbone，requirejs 项目

背景现在搞前端开发，不用个什么框架都不好意思说自己是前端，什么React，angular，backbone，只用jquery都不好意思跟别人打招呼。比如说现在想搞一个小项目，选了一个框架，看完文档云里雾里，看别人的实践，更加迷惑，完全不知道他要干什么。假如

Chasingsun / 0评论 2019-06-20

JavaScript的Backbone.js框架入门学习指引

由于这个系统非常庞大，胖客户端方案难免需要在客户端写大量的JS代码。当界面上的操作引起model中属性的变化时，model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新

kiven / 0评论 2016-05-07

前端Backbone源码解读（二）

强烈建议一边看着源码一边读本文章，本文不贴大段代码。在写backbone应用的时候，说实话，大部分的时间都是在写这三个模块的内容。但我希望能够找到一条线索，能把各自模块的内部机理整理清楚。就像前一篇文章中介绍的Events那样。Events整个模块其实就是

淡蓝 / 0评论 2016-08-29

前端Backbone源码解读（一）

MVC是一种GUI软件的一种架构模式。它的目的是将软件的数据层和视图分开。Model连接数据库，实现数据的交互。用户不能直接和数据打交道，而是需要通过操作视图，然后通过controller对事件作出响应，最后才得以改变数据。Smalltalk-80是早期的

happylife / 0评论 2016-08-29

使用backbone的history管理SPA应用的url

本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理。SPA应用的核心在于使用无刷新的方式更改url，从而引发页面内容的改变。从实现上来看，url的管理和页面内容的管理是其中的两个难点。就url的管理而言，主要有以下三方面的要

编程爱好者联盟 / 0评论 2016-11-03

backbone学习总结（二）

;今天来看下backbone的路由控制的功能。其实个人感觉backbone，模块就那么几个，熟悉它的框架结构，以及组成，就差不多。废话不多说，我们来看看还剩下的功能。; ;<pre> ;//路由与历史管理 ; ; ; ; ; ; ; ; ; ;

编程爱好者联盟 / 0评论 2016-09-17