最近要用到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. Windows下Pycharm安装Tensorflow：ERROR: Could not find a version that satisfies the requirement tensorflow

    今天在Windows下通过Pycharm安装Tensorflow时遇到两个问题: 使用pip安装其实原理都相同,只不过Pycharm是图形化的过程! 1.由于使用国外源总是导致Timeout 解决方法 ...

  2. windows10 L2tP nat 下无法连接的处理

    事件查看器中没有错误代码显示. Windows 10 L2TP/IPsec Manual Setup Instructions Bold items are things you will click ...

  3. 嵌入式Linux应用开发完全手册读书笔记——交叉编译工具选项说明

    交叉编译工具选项说明 arm-linux-gcc 一个c/c++文件要变成可执行文件需要4步:预处理 -> 编译 -> 汇编 -> 链接: 在使用arm-linux-gcc时的常用选 ...

  4. thymeleaf的内联th:inline（在javascript访问model中的数据）

    thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据.但如果不想通过th标签而是简单地访问model对象数据,或是想在ja ...

  5. IIS教程：因权限问题被拒绝访问的解决方案

    https://blog.csdn.net/a497785609/article/details/49952281 写了一个类IISAdmin,负责建立.设置.删除虚拟目录,发现在web中调用,遇到权 ...

  6. 如何发布一个npm包？

    npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步 ...

  7. Springboot静态资源映射 “/” 引发的血案

    因为少写一个 / 浪费已个下午的时间,

  8. ECMAScript 6 入门——ES6 声明变量的六种方法

    ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令.ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和cla ...

  9. vue-cli3.0 环境变量与模式

    vue-cli3.0移除了配置文件目录: config和build文件夹.可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢? 所有方法肯定是 ...

  10. mysql你问我答

    1.尊敬的先生,请您谈谈mysql数据库的引擎 数据库中的表设定了什么存储引擎,那么该表在数据存储方式.数据更新方式.数据查询性能以及是否支持索引等方面就会有不同的“效果”. mysql引擎大致分两类 ...