[Backbone]6. Collections.
Define a collection:
var AppointmentList = Backbone.Collection.extend({model: Appointment});
RESET the json:
var appointments = new AppointmentList();
var json = [
{title: 'Back pain'},
{title: 'Dry mouth'},
{title: 'Headache'}
];
appointments.reset(json);
Get url and fetch json data:
var AppointmentList = Backbone.Collection.extend({
url: '/appointments',
model: Appointment
});
var appointments = new AppointmentList();
appointments.fetch();
This Dr. Goodparts does not trust us when we tell him we are successfully loading data from the server into our collection.
To prove him wrong, display an alert with the number of items in the collection by listening for the reset event.
var appointments = new AppointmentList();
appointments.fetch();
appointments.on('reset', function(){
alert(appointments.length);
});
Wouldn't ya know, our users don't like getting alerts every time we fetch new data for our collection.
Update the fetch call below to not fire the reset event.
//By default, when fetch or add model, the reset event will be triggered.
//TO disable the reset event, can use
appointments.fetch({silent: true});
Use an event listener to log to the console the model's title anytime a model is added to the appointments collection.
var appointments = new AppointmentList();
appointments.on('add', function(appointment){
console.log(appointment.get('title'));
});
There are a lot of appointments in our collection and Dr. Goodparts wants a list of all appointment titles so he can arrange his equipment for the day.
Use the map iteration function to return an array of appointment titles and assign to the titles variable.
var titles = new Array();
appointments.map(function(appoinment){
titles.push(appoinment.get('title'));
});
[Backbone]6. Collections.的更多相关文章
- Backbone.js 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构
Backbone.js 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和 自定义事件:集合附有可枚举函数 ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理
当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数 ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...
- Django+Tastypie作后端,RequireJS+Backbone作前端的TodoMVC
一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...
- Django+Tastypie作后端,Backbone作前端的TodoMVC
TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...
- MVVM与Backbone demo
MVVM https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
- Backbone的一点使用心得
Backbone的其实感觉上上手很难,大概在一年前就想实践下,结果总是没有付诸行动,这次需求中狠狠心决定一定要使用一次看看,感受下. 可是第一步真的比较困难,因为直接看API好像没有感觉就在网上找实例 ...
- Backbone.js学习之Backbone.View(视图)
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
随机推荐
- BZOJ 4213 贪吃蛇 上下界费用流 网络流
https://darkbzoj.cf/problem/4213 https://www.cnblogs.com/DaD3zZ-Beyonder/p/5733326.html 题目描述 dbzoj又崩 ...
- 【Floyd(并非水题orz)】BZOJ4093-[Usaco2013 Dec]Vacation Planning
最近刷水太多标注一下防止它淹没在silver的水题中……我成为了本题,第一个T掉的人QAQ [题目大意] Bovinia设计了连接N (1 < = N < = 20,000)个农场的航班. ...
- CF1027F Session in BSU
link 花絮: 这场看起来打得还不错的样子……(别问我是用哪个号打的). 然后听说这题的思想被出了好多次,女生赛也出过,quailty算法,然而当时没反应过来,而且时间不多啦. 题意: 有n个人,每 ...
- [CodeForces-585F]Digits of Number Pi
题目大意: 给你一个数字串s,一个序列范围l和r,(l和r的数字位数为d)求l到r中有多少个数,满足它的长度为d/2的子串,能够在s中被匹配. 思路: 首先将s中每一个长度为d/2的子串插入后缀自动机 ...
- web开发中兼容性问题(IE8以上含)持续更新~~
在实际开发中总是遇到莫名其妙的问题~~~那么就记录下来这些问题,对这些问题进行一个总结. 1.事件对象 1)事件参数e,就是事件对象,标准的获取方式 2)e.eventPhase 事件阶段,IE8以前 ...
- PAT甲级1114. Family Property
PAT甲级1114. Family Property 题意: 这一次,你应该帮我们收集家族财产的数据.鉴于每个人的家庭成员和他/她自己的名字的房地产(房产)信息,我们需要知道每个家庭的规模,以及他们的 ...
- faceNet编译问题
1.执行align_dataset_mtcnn.py出现无法导入检测模型的问题 a.现象如下 Creating networks and loading parameters Traceback (m ...
- Comparable<T> 和 Comparator<T>
相同点: Comparable<T> 和 Comparator<T>都是接口 不同点: 两者声明的方法不同.前者是compareTo()方法,后者是compare()方法. C ...
- saga中的saga(A Saga on Sagas)
此文翻译自msdn,侵删. 原文地址:https://msdn.microsoft.com/en-us/library/jj591569.aspx Process Managers, Coordina ...
- Android中播放本地SD卡中歌曲须要的加入的权限
使用MediaPlayer播放本地Mp3文件时.须要注意的訪问路径的问题以及訪问权限的问题. 1.訪问路径:/storage/emulated/0 此路径即为手机的根路径,能够通过下载ES文件浏览器软 ...