上一篇列出了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. Delphi 声明特性

  2. BIO、NIO、AIO 有什么区别？（未完成）

    BIO.NIO.AIO 有什么区别?(未完成)

  3. tensorflow.python.framework.errors_impl.PermissionDeniedError: /data; Permission denied

    在linux系统中,tensorflow跑mnist数据集出现错误,本应该自动下载的数据集 将mnist自动下载的路径,由/data/mnist之前的/删掉即可.改为data/mnist.

  4. C语言|博客作业12-学期总结

    我学到的内容 我的收获 第一次:https://www.cnblogs.com/tongyingjun/p/11563433.html:总结:初步了解了C语言.代码.博客园和Markdown语法. 第 ...

  5. Django+MySQLDB配置

    Django+MySQLDB配置   来源: ChinaUnix博客 日期: 2009.07.09 16:25 (共有条评论) 我要评论                   一.安装Mysql(1)下 ...

  6. IO编程之序列化

    转载地址:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138683221 ...

  7. Luogu P5048 [Ynoi2019模拟赛]Yuno loves sqrt technology III 分块

    这才是真正的$N\sqrt{N}$吧$qwq$ 记录每个数$vl$出现的位置$s[vl]$,和每个数$a[i]=vl$是第几个$vl$,记为$P[i]$,然后预处理出块$[i,j]$区间的答案$f[i ...

  8. 【8.27-模拟赛】remove

    题解: 代码: #include<iostream> #include<algorithm> #include<cstdio> #include<cstrin ...

  9. [C语言]结构体初始化的不同方法

    结构体的定义 struct Test{ int first; double second; }Sample; 方法一 定义时直接赋值 Sample s(1, 1.00); 缺点:必须匹配变量顺序,不能 ...

  10. CentOS7遇到问题总结

    问题1.保护多库版本:libstdc++-4.8.5-28.el7_5.1.i686 != libstdc++-4.8.5-28.el7.x86_64 错误:保护多库版本:libgcc-4.8.5-2 ...