上一篇列出了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. Win10系统Edge浏览器怎么截取网页长图？

    有时我们在工作演示时会需要截取网页上的图片,不过简单的截图可以,但如果需要截取超过屏幕大小的整个网页,你是不是就有些束手无策了.虽然拼接图片也是种方法,但毕竟还是不方便,下面好系统重装助手就教你在Wi ...

  2. Django的配置模板路径

    Django的配置模板路径 找到settings.py 配置静态目录: 注:创建静态文件名就用static 不要用别的. 两个函数.  return   redirect ('http//:www.b ...

  3. Linux磁盘及文件系统管理3

    文件系统管理工具: 创建文件系统的工具 mkfs mkfs.ext2,mkfs.ext3,mkfs.ext4,mkfs.xfs,mkfs.vfat,... 检测及修复文件系统的工具 fsck fsck ...

  4. Mac安装chromedriver和geckodriver

    DY@MacBook-Pro bin$brew install chromedriver Error: No available formula with the name "chromed ...

  5. MyBatis-09-Lombok

    9.Lombok Project Lombok is a java library that automatically plugs into your editor and build tools, ...

  6. 复习一下js的prototype 属性

    <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</t ...

  7. So easy RHCE

    1.将VGSRV  拉伸为100MB  VGSRV这个是逻辑卷的home分区,逻辑卷是可以随意拉伸的,但是需要注意的是拉伸之前必须使用umount卸载,否则系统会崩溃,虽然可以还原但是很麻烦,顺序不可 ...

  8. 给程序添加git commit信息

    遇到了一个客户程序出问题,自己这边始终无法重现的bug.为了检查问题,查到了一个添加git的commit信息到程序中的方法,感觉对程序版本控制十分好用. 一,项目中添加如下文件 文件结构: GitVe ...

  9. Java HashMap实现原理分析

    参考链接:https://www.cnblogs.com/xiarongjin/p/8310011.html 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是 ...

  10. codeforces685B

    CF685B Kay and Snowflake 题意翻译 输入一棵树,判断每一棵子树的重心是哪一个节点. 题目描述 After the piece of a devilish mirror hit ...