backbone之module
2024-09-05 08:52:23
上一篇列出了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干的事。
最新文章
- 深入浏览器兼容 细数jQuery Hooks 属性篇
- Lind.DDD.Manage项目核心技术分享
- Net accounts命令
- 使用BAT安装 Windows Service
- [译]PrestaShop开发者指南 第一篇 基础
- 4.1.1 A - Calendar(简单线性表)（日期查找）（数组应用）
- HBase从hdfs导入数据
- CSS水平导航条和纵向导航条
- 首次登录与在线求助man page
- Django剖析
- 跟着刚哥梳理java知识点——异常（十一）
- websocket通信 实现java模拟一个client与webclient通信
- POJ1509 Glass Beads(最小表示法 后缀自动机)
- [微软].net2.1 的兼容支持情况.
- dhcpsrv：windows系统的优秀开源免费dhcp serve软件
- 从 moment -> nodejs -> sequelize -> postgres，你都得设置好时区
- GIS性能策略
- windows cmd命令显示UTF8设置
- Python自动化开发 - 字符编码、文件和集合
- .NetCore Cap 注册 Consul 服务发现