最近要用到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. Maven新建项目出现 Could not calculate build plan:plugin 错误解决办法

    删除本地.m2仓库中 org.apache.maven.plugins:maven-resources-plugin所在目录. 然后右击项目 Maven->Update Project-> ...

  2. linux (wsl) npm 无法安装包

    错误代码如下 request to https://registry.npm.taobao.org/yrm failed, reason: getaddrinfo EAI_AGAIN registry ...

  3. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  4. JS 定时器-setInterval、clearInterval、setTimeout

    在微信小程序里写的: // pages/splash/splash.js const app = getApp() Page({ data: { remainSecond: }, // 页面渲染完成后 ...

  5. php+文件分块上传

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  6. TTTTTTTTTTTTTTTTTT Gym 100851L 看山填木块

    题意:这题是给你w列方格,然后给你n个方块,让你加进去,使得这个图变得最高,加的要求是,如果这块的下面,以及左下右下都有,才能放 #include <cstdio> #include &l ...

  7. ZOJ - 4114 Flipping Game

    ZOJ - 4114 Flipping Game 题目大意:给出两个串s,t,n个灯泡的序列,1代表开着,0代表关着,一共操作k轮,每轮改变m个灯泡的状态,问最终能把s串变成t串的方案数. 坤神题解. ...

  8. [LOJ6053]简单的函数：Min_25筛

    分析 因为题目中所给函数\(f(x)\)的前缀和无法较快得出,考虑打表以下两个函数: \[ g(x)=x \times [x是质数] \] \[ h(x)=1 \times [x是质数] \] 这两个 ...

  9. Sublime Text 3中配置Python3的开发环境

    在Tools-->Build System-->New Build System 之后弹出如下界面: 将其内容修改为 代码: { "cmd": ["D:/so ...

  10. Maven项目导出jar包，包含依赖

    1. Maven项目导出jar包,包含依赖:mvn dependency:copy-dependencies package 2. 可以在Project创建lib文件夹,输入以下命令:mvn depe ...