上一篇列出了collection的代码，下面要把代码进行分离

 //先是app.js

 var ContactManager = new Marionette.Application();

 ContactManager.addRegions({

     mainRegion: "#main-region"

 });

 ContactManager.on("initialize:after", function () {

     ContactManager.ContactsApp.List.Controller.listContacts();

 });
 //再是list_view.js

 ContactManager.module("ContactsApp.List", function (List, ContactManager,

         Backbone, Marionette, $, _) {

     List.Contact = Marionette.ItemView.extend({

         tagName: "li",

         template: "#contact-list-item"

     });

     List.Contacts = Marionette.CollectionView.extend({

         tagName: "ul",

         itemView: List.Contact

     });

 });
 //接着是contact.js

 ContactManager.module("Entities", function (Entities, ContactManager,

         Backbone, Marionette, $, _) {

     Entities.Contact = Backbone.Model.extend({});

     Entities.ContactCollection = Backbone.Collection.extend({

         model: Entities.Contact,

         comparator: "firstname"

     });

     var contacts;

     var initializeContacts = function () {

         contacts = new Entities.ContactCollection([

             {

                 id: 1, firstname: "Alice", lastname: "Arten", phoneNumber: "555-0184"

             },

             {

                 id: 2, firstname: "Bob", lastname: "Brigham", phoneNumber: "555-0163"

             },

             {

                 id: 3, firstname: "Charlie", lastname: "Campbell", phoneNumber: "555-0129"

             }

         ]);

     };

     var API = {

         getContactEntities: function () {

             if (contacts === undefined) {

                 initializeContacts();

             }

             return contacts;

         }

     };

     ContactManager.reqres.setHandler("contact:entities", function () {

         return API.getContactEntities();

     });

 });
 //最后list_controlller.js

 ContactManager.module("ContactsApp.List", function (List, ContactManager,

         Backbone, Marionette, $, _) {

     List.Controller = {

         listContacts: function () {

             var contacts = ContactManager.request("contact:entities");

             var contactsListView = new List.Contacts({

                 collection: contacts

             });

             ContactManager.mainRegion.show(contactsListView);

         }

     };

 });
 //当然还有index.html

 <!DOCTYPE html>

 <html>

     <head>

         <title> Marionette Contact Manager</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link href="../css/bootstrap.css" rel="stylesheet" >

         <style  type="text/css">

             body{

                 margin-top: 60px;

             }

         </style>

     </head>

     <body>

         <div class="navbar navbar-inverse navbar-fixed-top" >

             <div class="navbar-inner" >

                 <div class="container" >

                     <span class="brand" style=" color: white"> Contact manager</span>

                 </div>

             </div>

         </div>

         <div id="main-region" class="container" >

             <p> Here is static content in the web page. You'll notice that it gets

                 replaced by our app as soon as we start it. </p>

         </div>

         <script type="text/template" id="contact-list-item" >

             <%= firstname %>  <%= lastname %>

         </script>

         <script src="../js/libs/jquery/jquery-1.11.1.min.js"  type="text/javascript"></script>

         <script src="../js/libs/underscore.js/underscore.js"  type="text/javascript"></script>

         <script src="../js/libs/backbone.js/backbone.js"  type="text/javascript"></script>

         <script src="../js/libs/backbone.marionette/backbone.marionette.js"  type="text/javascript"></script>

         <script src="../js/libs/json2/json2.js"  type="text/javascript"></script>

         <script src="../js/test/module4/app.js"  type="text/javascript"></script>

         <script src="../js/test/module4/contact.js"  type="text/javascript"></script>

         <script src="../js/test/module4/list_view.js"  type="text/javascript"></script>

          <script src="../js/test/module4/list_controlller.js"  type="text/javascript"></script>

         <script type="text/javascript" >

             ContactManager.start();

         </script>

     </body>

 </html>

效果如图：

这就是module干的事。

backbone之module的更多相关文章

  1. [Backbone]1. Module, View classed

    Welcome to the Anatomy of Backbone.js challenges! We're going to be building a simple Appointment ap ...

  2. ACNet: 特别的想法，腾讯提出结合注意力卷积的二叉神经树进行细粒度分类 | CVPR 2020

    论文提出了结合注意力卷积的二叉神经树进行弱监督的细粒度分类,在树结构的边上结合了注意力卷积操作,在每个节点使用路由函数来定义从根节点到叶子节点的计算路径,结合所有叶子节点的预测值进行最终的预测,论文的 ...

  3. 从卷积拆分和分组的角度看CNN模型的演化

    博客:博客园 | CSDN | blog 写在前面 如题,这篇文章将尝试从卷积拆分的角度看一看各种经典CNN backbone网络module是如何演进的,为了视角的统一,仅分析单条路径上的卷积形式. ...

  4. Backbone源码分析（一）

    距离上一篇博客有一段时间了,期间各种琐事萦绕.最主要的一件是,当我差不多将整个dojo核心源码看完,惊讶的发现dojo1.*的设计以是老态龙钟之象,而我沉溺在dojo中太久,已经不知道前端世界变成了什 ...

  5. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  6. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

    这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...

  7. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一

    Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...

  8. Backbone事件模块源码分析

    事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...

  9. angularjs backbone 集成requirejs 模块化

    首先认识requirejs requirejs是个包加载器,核心功能是模块化管理,可以实现按需加载. 重点是明白 模块化不是按需加载. 模块化的意义: 是通过代码逻辑表明模块之间的依赖关系和执行顺序, ...

随机推荐

  1. Jenkins服务器安装与配置

    Jenkins是一个非常出色的持续集成服务器,本文主要介绍在CentOS系统中Jenkins的基本安装配置方法,供参考. 一. 软件包: 1. 下载apache-maven-2.2.1-bin.tar ...

  2. Maven 基础概念

    Project:任何你想构建的事务Maven都可以认为它们是工程,这些工程被定义为工程对象模型(project Object Model POM) 一个工程可以依赖其他的工程,一个工程也可以由多个子工 ...

  3. RocketMQ原理分析 文章 精选【收集】

    一. 推荐文章 1.以下来自OSChina的 mingxungu https://itzones.cn/ RocketMQ运维监控 RocketMQ刷盘策略 RocketMQ消息重试 RocketMQ ...

  4. 用JavaScript更新CSS变量

    HTML <div class="mover"></div> CSS .mover { width: 50px; height: 50px; backgro ...

  5. 微信小程序 base64ToArrayBuffer

    base64ToArrayBuffer 将 base64 的字符串转化为 ArrayBuffer 对象 示例代码: 使用位置:在 JS文件的任意函数中使用 const base64 = 'CxYh'; ...

  6. c#使用 StackExchange.Redis 封装 RedisHelper

    公司一直在用.net自带的缓存,大家都知道.net自带缓存的缺点,就不多说了,不知道的可以查一查,领导最近在说分布式缓存,我们选的是redis,领导让我不忙的时候封装一下,搜索了两天,选了选第三方的插 ...

  7. HDU 6061 - RXD and functions | 2017 Multi-University Training Contest 3

    每次NTT都忘记初始化,真的是写一个小时,Debug两个小时- - /* HDU 6061 - RXD and functions [ NTT ] | 2017 Multi-University Tr ...

  8. slice(start, [end]) 选取一个匹配的子集 与原来的slice方法类似

    slice(start, [end]) 概述 选取一个匹配的子集 与原来的slice方法类似 参数 startIntegerV1.1.4 开始选取子集的位置.第一个元素是0.如果是负数,则可以从集合的 ...

  9. Codeforces Round #580 (Div. 2)

    这次比上次多A了一道,但做得太慢,rating还是降了. Problem A Choose Two Numbers 题意:给出两个集合A,B,从A,B中分别选出元素a,b使得a+b既不属于集合A,又不 ...

  10. 【原创】洛谷 LUOGU P3366 【模板】最小生成树

    P3366 [模板]最小生成树 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N ...