最近要用到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. sql 基础语法使用

    SQL的一些基础查询语法    基础.限定.模糊查询     关键字都是大写. 使用 BETWEENN AND 的时候小的数字或者日期放到  AND(并且)  的面前,大的一个放到AND 后面. 示例 ...

  2. Form组件 cookie和session

    django form组件 1.渲染标签 2.校验数据 3.展示信息 第一步需要一个form类 from django import forms class MyForm(forms.Form): n ...

  3. java——java跨平台原理

    不同操作系统不同的虚拟机,屏蔽不同系统指令集的差异. 开发程序只需要遵循java规范:

  4. 小辣椒之lombok-1.18.8.jar的使用

    1.下载lombok-1.18.8.jar包 http://central.maven.org/maven2/org/projectlombok/lombok/1.18.8/lombok-1.18.8 ...

  5. oppo面经-java开发

    Oppo一面(1)自我简介(2)介绍一个自己做过的最得意的项目,项目的细节,难点,怎么解决的,还存在的问题,有什么优化的想法吗(这个我说了很长时间,面试官说非计算机专业的,有这种实习经验确实能加分)( ...

  6. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  7. webpack Uncaught ReferenceError: Swiper is not defined

    一.报错原因:Swiper的JS文件没有加载成功,或者说swiper丢失了依赖(正常操作是:加载后再初始化Swiper) 二.解决方法:在初始化 Swiper 的js文件中导入 Swiper impo ...

  8. 使用ADB命令写Android自动化测试脚本

    使用脚本来执行测试的特点: ●书写方便 ●基本上可以实现90%以上的功能性覆盖 ●测试结果需要通过自己观察整个过程和日志文件来得出的 ●有些外部的动作,脚本是无法实现的,比如录入指纹 ●只适配特定尺寸 ...

  9. 【LuoguP4482】[BJWC2018]Border 的四种求法

    题目链接 题意 区间 boder \(n,q\leq 2*10^5\) Sol (暴力哈希/SA可以水过) 字符串区间询问问题,考虑用 \(SAM\) 解决. boder相当于是询问区间 \([l,r ...

  10. jsp前台输入框不输入值，后台怎么取出整型？

    当前台输入框限定整型,后台取值就会出现很多问题. eg: Integer.parseInt(request.getParameter("uno"));当前台的文本框不输入值,直接点 ...