上一篇列出了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. 【2017-06-16】Jquery获取dropdownlist选中的内容

    var Text = $("#DropDownList1 option:selected").text(); 注意:DropDownList1和option之间有个空格!!!

  2. 飞漫魏永明：从MiniGUI看嵌入式十年得与失

    日前,飞漫软件创始人魏永明,在飞漫成立十周年之际,回顾了公司发展这十年,同时也回顾了嵌入式发展的这十年.魏永明以自身涉及嵌入式产业的方方面面,创新.人员管理.工程管理.教育培训.经营策略等多方面,并且 ...

  3. 置换的玩笑——DFS&&暴力

    题目 链接 题意:一个$1$到$n$的序列被去掉空格,需要将其还原.例如$4111109876532$可还原成$4 \ 1 \  11 \  10 \  9 \  8 \  7 \  6 \  5 \ ...

  4. hdu 6074 Phone Call

    题 O∧O http://acm.hdu.edu.cn/showproblem.php?pid=6074 2017 Multi-University Training Contest - Team 4 ...

  5. vue 解析时表达式闪烁的问题

    现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...

  6. Appium Inspector

    点击放大镜,打开如下页面: 需要填写的信息如下: 获取以上信息,需执行aapt命令,查看app信息: 进入appt.exe所在路径,执行如下命令: 得到app的详细信息: 填写完如下信息后,保存: i ...

  7. mybatis标签selectkey无法返回主键值

  8. 互联网上最可怕的搜索引擎：shodan

    互联网上最可怕的搜索引擎:shodan 介绍:http://tech.qq.com/a/20130410/000013.htm

  9. GitLab 如何在 Web 界面中 Merge branch

    希望在 GitLab 中对 2 个 branch 进行合并,如何创建 Pull Request 并且如何进行合并呢? 在 GitLib 的 Web 界面中选择 Merge Requests 然后再界面 ...

  10. Django基础之CBV和FBV

    我们之前写过的是基于函数的view,就叫FBV.还可以把view写成基于类的. 1. FBV版 def add_class(request): if request.method == "P ...