最近要用到backbone.js，网上也找了些资料，但是就看到一个开头还可以，往下看基本就看不下去了，幸好有这本书[LeanpubRead] Backbone.Marionette.js A Gentle Introduction，虽然英文版的，但是比较易懂，看起来倒不是很费劲，关键是知识点讲的很体系。

先贴几个案例的代码：collection(集合)，下面是所有代码都写在html中的，为了和后面的module进行比较

 <!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>

         <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>

     </head>

     <body>

         <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 type="text/javascript" >

 var ContactManager = new Marionette.Application();

 ContactManager.addRegions({

     mainRegion: "#main-region"

 });

 ContactManager.Contact = Backbone.Model.extend({});

 ContactManager.ContactItemView = Marionette.ItemView.extend({

     tagName: "li",

     template: "#contact-list-item"

 });

 ContactManager.ContactsView = Marionette.CollectionView.extend({

     tagName: "ul",

     itemView: ContactManager.ContactItemView

 });

 ContactManager.ContactCollection = Backbone.Collection.extend({

     model: ContactManager.Contact,

     //sort

     comparator: "firstName"

 });

 ContactManager.on("initialize:after", function () {

     var contacts = new ContactManager.ContactCollection([

         {

             firstName: "Bob",

             lastName: "Brigham",

             phoneNumber: "555-0163"

         },

         {

             firstName: "Alice",

             lastName: "Arten",

             phoneNumber: "555-0184"

         },

         {

             firstName: "Charlie",

             lastName: "Campbell",

             phoneNumber: "555-0129"

         }

     ]);

     var contactsListView = new ContactManager.ContactsView({

         collection: contacts

     });

     ContactManager.mainRegion.show(contactsListView);

 });

 ContactManager.start();

         </script>

         <script type="text/javascript">

         </script>

     </body>

 </html>

backbone之collection的更多相关文章

  1. -_-#【Backbone】Collection

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. [Backbone]7. Collection Views, Custom Events

    It's finally time to start building out our Appointment app. We're going to be using a collection an ...

  3. 【再探backbone 02】集合-Collection

    前言 昨天我们一起学习了backbone的model,我个人对backbone的熟悉程度提高了,但是也发现一个严重的问题!!! 我平时压根没有用到model这块的东西,事实上我只用到了view,所以昨 ...

  4. backbone.Collection源码笔记

    Backbone.Collection backbone的Collection(集合),用来存储多个model,并且可以多这些model进行数组一样的操作,比如添加,修改,删除,排序,插入,根据索引取 ...

  5. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  6. Backbone+React使用

    1.react作为backbone的视图 2.backone和react和通信,backbone的view 渲染react组件, react组件使用backbone的collection数据 < ...

  7. Backbone 学习总结

    1.Backbone描述 官网描述:(1)Provides client-side app structure (2)Models to repents data (3)View to hook up ...

  8. Backbone.js 中使用 Model

    前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...

  9. 30行代码实现Javascript中的MVC

    从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS.EmberJS.Backbone.ReactJS.Rio ...

随机推荐

  1. Java通过JDBC连接SQL Server2017数据库

    一.需要明白的基础知识 数据库名 驱动jar(x表示版本号) 具体驱动类 连接字符串(ip地址,端口号,名字) Oracle ojdbc-x.jar oracle.jdbc.oracleDriver ...

  2. npm 安装指定版本的包

    使用 包名@版本号 指定, 例如,安装 Express 3.21.2, $ npm

  3. 图像处理---《在图片上打印文字 FreeType库》

    图像处理---<在图片上打印文字 FreeType库> 目的:想在处理之后的图像上打印输出结果.方法: (1)只在图像上打印 数字.字母的话:                1.Mat格式 ...

  4. 洛谷 P2765 魔术球问题 （dinic求最大流，最小边覆盖）

    P2765 魔术球问题 题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2 ...

  5. 关于博主skywang123456文章——二叉堆(三)之 Java的实现的质疑

    博客园博主skywang123456(以下简称s博主)是一个大牛级的人物,相信很多程序员都拜读过他的博客,我也不例外,并且受益匪浅.但是对于文章二叉堆(三)之 Java的实现我有一些疑惑,写在这里,供 ...

  6. wavefronts

    https://www.g-truc.net/post-0597.html https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in- ...

  7. P2709 小B的询问——普通莫队&&模板

    普通莫队概念 莫队:莫涛队长发明的算法,尊称莫队.其实就是优化的暴力. 普通莫队只兹磁询问不支持修改,是离线的. 莫队的基本思想:就是假定我得到了一个询问区间[l,r]的答案,那么我可以在极短(通常是 ...

  8. 单独使用ibatis做事物控制。

    当项目中,只使用到了ibatis而没有使用spring来作为事物控制的时候,可以这样写: try { Reader reader = Resources.getResourceAsReader(&qu ...

  9. Linux 防火墙遇到的问题

    一直报这个错误,写个博客来记录一下问题 在centos7中执行service iptables start 报如下错误 执行如下命令 systemctl stop firewalld systemct ...

  10. 上下文管理器和else块

    一.if 语句之外的 else块 else 子句不仅能在 if 语句中使用,还能在for.while和try语句中使用. (1)for :仅当 for 循环运行完毕时(即 for 循环没有被break ...