backbone之module
上一篇列出了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的更多相关文章
- [Backbone]1. Module, View classed
Welcome to the Anatomy of Backbone.js challenges! We're going to be building a simple Appointment ap ...
- ACNet: 特别的想法，腾讯提出结合注意力卷积的二叉神经树进行细粒度分类 | CVPR 2020
论文提出了结合注意力卷积的二叉神经树进行弱监督的细粒度分类,在树结构的边上结合了注意力卷积操作,在每个节点使用路由函数来定义从根节点到叶子节点的计算路径,结合所有叶子节点的预测值进行最终的预测,论文的 ...
- 从卷积拆分和分组的角度看CNN模型的演化
博客:博客园 | CSDN | blog 写在前面 如题,这篇文章将尝试从卷积拆分的角度看一看各种经典CNN backbone网络module是如何演进的,为了视角的统一,仅分析单条路径上的卷积形式. ...
- Backbone源码分析（一）
距离上一篇博客有一段时间了,期间各种琐事萦绕.最主要的一件是,当我差不多将整个dojo核心源码看完,惊讶的发现dojo1.*的设计以是老态龙钟之象,而我沉溺在dojo中太久,已经不知道前端世界变成了什 ...
- 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views
这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...
- Backbone事件模块源码分析
事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...
- angularjs backbone 集成requirejs 模块化
首先认识requirejs requirejs是个包加载器,核心功能是模块化管理,可以实现按需加载. 重点是明白 模块化不是按需加载. 模块化的意义: 是通过代码逻辑表明模块之间的依赖关系和执行顺序, ...
随机推荐
- Centos7安装dig命令
作者: jwj 时间: 2018-10-17 分类: 服务器 最近做一个项目,需要用到Gmail邮箱发送邮件,但发现发送不出去.排查问题时,需要用到dig命令,但使用时,却提醒我dig命令不存在~那就 ...
- hibernate入门配置及第一个hibernate程序
学习了hibernate后就想先给大家分享一下它的配置方法: jar包导入 一.数据库表的创建 二.开启hibernate配置 编译器:eclipse 数据库:mysql 1.创建第一个xml文件 ...
- Ubuntu在命令行安装显卡驱动
Ubuntu在命令行安装显卡驱动 1.进入电脑的BIOS,把Security Boot设置为Disabled. 2.进入终端,输入一以下命令(这里以安装NVIDIA-390进行演示) sudo add ...
- Zabbix Web 中文字体显示问题
- scala-currying化
scala的加里化(currying)纠结了很久.通过Scala Worksheet 可以打印很多调试信息,所以用它写了一些测试代码,帮助自己理解. object test { //一个参数列表,3个 ...
- Java实现从服务器下载文件到本地的工具类
话不多说,直接上代码...... import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServlet ...
- [codeforces792C][dp]
https://codeforc.es/contest/792/problem/C C. Divide by Three time limit per test 1 second memory lim ...
- mysql5.7备份
一.备份准备&备份测试 1.备份目录准备 #mysql专用目录 mkdir /mysql #mysql备份目录 mkdir /mysql/backup #mysql备份脚本 mkdir /my ...
- 享元模式（Flyweight）---结构型
1 基础知识 定义:提供了减少对象数量从而改善应用所需的对象结构的方式.特征:运用共享技术有效支持大量细粒度的对象. 本质:分离与共享. 使用场景: (1)如果一个应用程序使用了大量的细粒度对象,可以 ...
- GitLab 如何在 Web 界面中 Merge branch
希望在 GitLab 中对 2 个 branch 进行合并,如何创建 Pull Request 并且如何进行合并呢? 在 GitLib 的 Web 界面中选择 Merge Requests 然后再界面 ...