上一篇列出了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. linux 使用 rz 上传和 sz下载 命令

    linux系统 root权限 lrzsz安装包 ①.在线安装-执行命令 yum install lrzsz  离线安装-需要提前准备好安装包 编译安装 root 账号登陆后,依次执行以下命令: tar ...

  2. git回退到历史版本

    问题描述 在开发的过程中,想要修改一个参数的命名.然后修改各种地方,并且push上码云的远程仓库.然后突然发现还要改很多地方,突然后悔不想改动了.那该怎么办呢? 处理步骤 回退本地的git版本 将本地 ...

  3. (a ==1 && a== 2 && a==3) 有可能是 true 吗?

    今天看到这个题目,感到很有意思,查找了些资料,各位牛人果然有高招解决: 方法一: var a = { i: 1, toString: function () { return a.i++; } } i ...

  4. IDEA设置CodeGlance颜色

    CodeGlance是IDEA的mini地图插件, 默认情况下, 其颜色和编辑框的颜色基本一致, 而安装CodeGlance就是为了方便滚动框的上下拖拉, 颜色一致的话会将这种CodeGlance比拖 ...

  5. wordpress网站不正常显示解决办法

    第一种:自己在后台修改了wordpress网址,导致不能登陆后台. 解决办法: 1.首先我们登录MySql数据库,这个不用我教吧: 2.查看表”wp_options”的数据(你的表不一定是以”wp”开 ...

  6. Java笔记（基础第二篇）

    声明数组 数组元素类型 数组名字[]; 数组元素类型[] 数组名字; 分配内存空间 数组名字 = new 数组元素类型[数组元素的个数] 其中使用new关键字为数组分配内存时,数组中各个元素的初始化值 ...

  7. mysqldump表损坏问题

    遇到的问题:mysqldump: Error 1194: Table 'user' is marked as crashed and should be repaired when dumping t ...

  8. Codeforces Round #586 (Div. 1 + Div. 2) C. Substring Game in the Lesson

    链接: https://codeforces.com/contest/1220/problem/C 题意: Mike and Ann are sitting in the classroom. The ...

  9. SQL server 自定义函数FUNCTION的使用

    原文链接:https://blog.csdn.net/lanxingbudui/article/details/81736402 前言:        在SQL server中不仅可以可以使用系统自带 ...

  10. 【DES加密解密】 C#&JAVA通用

    DES加密解密 C# Code /// <summary> /// DES加密解密帮助类 /// </summary> public static class DESHelpe ...