`
z2009zxiaolong
  • 浏览: 77116 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

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);

 最后,附上源代码。

  • 大小: 23.7 KB
分享到:
评论
2 楼 qq317808023 2016-01-12  
非常好学习了
1 楼 13770586272 2015-11-24  
不错啊,可以直接运行

相关推荐

    backbone学习例子-可编辑的表格

    在这个“backbone学习例子-可编辑的表格”中,我们将深入探讨Backbone.js如何实现一个动态、可交互的数据表格。 1. **模型(Model)**:在Backbone中,模型是数据的容器,通常与服务器上的资源对应。在这个例子中,...

    一个结合了require.js+backbone的例子,适合初学者

    标题"一个结合了require.js+backbone的例子,适合初学者"表明这个压缩包包含了一个示例项目,旨在帮助新手理解如何将这两项技术结合使用。这个例子将展示如何利用Require.js来组织和加载Backbone.js应用中的各种组件...

    backbone整合require例子

    **标题解析:** "backbone整合require例子" 这个标题表明我们将讨论如何将Backbone.js框架与RequireJS模块加载器结合使用。Backbone.js是一个轻量级的JavaScript库,用于构建可维护的前端应用程序,而RequireJS则是...

    实例讲解JavaScript的Backbone.js框架中的View视图

    在学习JavaScript前端开发框架时,Backbone.js是一个不可忽视的工具,它帮助开发者构建单页面应用(SPA)。Backbone.js框架相对轻量级,它的核心在于模型(Models)、视图(Views)、集合(Collections)和路由...

    require+backbone结合开发的例子

    "require+backbone结合开发的例子"这个主题,指的是利用AMD(Asynchronous Module Definition)规范的实现库RequireJS,来组织和管理Backbone.js应用中的模块依赖。 RequireJS是解决JavaScript模块化问题的一种解决...

    Node应用程序构建——使用MongoDB和Backbone

    在本文中,我们将深入探讨如何使用Node.js构建应用程序,并结合MongoDB数据库以及Backbone.js作为前端框架,实现数据的高效管理和交互。Node.js是基于Chrome V8引擎的JavaScript运行环境,它让JavaScript能够运行在...

    Backbone.js例子代码重构

    在这个“Backbone.js例子代码重构”的资源中,我们可以深入理解如何利用Backbone.js优化代码结构,提高代码的可读性和可维护性。 1. **模型(Model)**:在Backbone.js中,模型是数据的容器,通常与服务器上的数据...

    《Node应用程序构建:使用MongoDB和Backbone》 源码

    《Node应用程序构建:使用MongoDB和Backbone》是一本深入探讨使用Node.js、MongoDB以及Backbone.js构建高效网络应用的书籍。源码提供给读者更直观的学习体验,通过实际操作加深理论理解。以下是该书涉及的主要知识点...

    application-template-backbone:应用模板——自带Backbone

    应用程序模板 - 基本此模板旨在为 The Iron Yard 快速生成测试驱动的作业。 但是你可以用它来做任何事情! 包括: 摩卡柴指示npm install npm start 该应用程序将在并提供 /public 之外的静态资产。

    BACKBONE.JS应用程序开发

    , 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...

    BackBone介绍及使用

    **BackBone介绍** Backbone.js 是一款轻量级的JavaScript框架,主要用来构建富客户端的Web应用。它强调数据模型的管理和视图的同步,帮助开发者以更有序的方式组织前端代码,提高开发效率。Backbone.js的核心设计...

    Backbone.js应用程序开发

    , 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...

    Building Node Applications with MongoDB and Backbone.pdf

    本书还通过一个具体的项目——构建一个社交网络应用——来综合运用上述知识点。这个示例项目不仅涵盖了上述所有技术要点,还展示了如何将它们有机地结合起来,解决实际问题的过程。例如: - **前后端分离**:使用...

    Node应用程序构建—使用MongoDB和Backbone+源码

    Node.js是一套用来编写高性能网络服务器的JavaScript工具包。...《Node应用程序构建——使用MongoDB和Backbone》可以作为学习和掌握Node.js、Backbone.js和MongoDB的实践教程,也适合对这几种技术感兴趣的读者阅读

    Backbone 文档

    这个文档将带你走进Backbone的世界,通过一个开发入门的例子,帮助你了解如何有效地利用这个工具类库。 首先,Backbone的核心组件包括Model、View、Collection和Router。Model是数据存储的基本单元,它负责管理和...

    typescript例子-Backbone.js MVC

    在"typescript例子-Backbone.js MVC"这个项目中,我们可以预见到以下关键知识点: 1. **TypeScript基础**:理解基本类型(如number、string、boolean)、接口(Interfaces)用于定义数据结构,类(Classes)实现...

    backbone+bootstrap+ibatis+spring例子

    【标题】"backbone+bootstrap+ibatis+spring例子"是一个综合性的项目示例,它融合了四个重要的技术栈:Backbone.js、Bootstrap、iBatis和Spring。这些技术在Web开发领域都有着广泛的应用,各自承担着不同的职责,...

Global site tag (gtag.js) - Google Analytics