最近要用到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. db2 with用法

    最近在研究db2 递归查询时想到了with,一直以为with只是用来查询递归,但是实际with功能强大,还有更加强大的功能,偶然读到一位大神的文章,对with做了很详细的解读,特贴出来供大家学习研究 ...

  2. maskrcnn-benchmark错误：ImportError: cannot import name rnn_compat

    错误: from apex import amp File "build/bdist.linux-x86_64/egg/apex/__init__.py", line 5, in ...

  3. 一篇关于ajax跨域问题的解决方案

    这几天没事,我有一个好友,让我帮他做一个机器人对话demo, 我说 看看有没有时间(其实自己一脸懵逼) 然后百度了一下,发现了一个机器人  -(连接就不弄出来了,可以私底下交流) ,,我是用这个的 好 ...

  4. [Abp vNext微服务实践] - 业务开发

    前几篇分别介绍了abp vNext微服务框架.开发环境搭建和vue element admin前端框架接入,在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了,本 ...

  5. 构建之法个人作业5——alpha2项目测试

    [相关信息] Q A 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 这个作业要求在 ...

  6. Linux文件系统之mv(重命名/移动文件)

    mv(move)命令 输入man mv,了解到mv命令是用于移动或重命名文件 语法 mv [options] source dest mv [options] source... directory ...

  7. Redis主从复制（读写分离）（四）

    Redis主从复制(读写分离) 克隆三台linux虚拟机   9.1.1.克隆虚拟机   9.1.2.生成新的mack地址 9.1.3.主从复制配置 redis主从复制 概述 1.redis的复制功能 ...

  8. MySQL5.7.21解压版安装详细教程（转）

    由于本人经常装系统,每次装完系统之后都要重新安装一些软件,安装软件的时候又要上网查找安装的教程,比较麻烦,所以自己整理了MySQL5.7.21解压版的安装方法,以便查看. 1.首先,你要下载MySQL ...

  9. 包过滤防火墙iptables(网络层)

    安装: yum -y install iptables-services 启动:systemctl start iptables.service 四表五链 过滤:filter - input forw ...

  10. 【原创】洛谷 LUOGU P3366 【模板】最小生成树

    P3366 [模板]最小生成树 题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N ...