[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 and a collection view to display a list of appointments to the ornery but brilliant Dr. Goodparts.
Let's start by creating a View Class named AppointmentListView and then create an instance of that class, passing in our collection instance appointments
var Appointment = Backbone.Model.extend({}); var AppointmentList = Backbone.Collection.extend({
model: Appointment
});
Answer:
var appointments = new AppointmentList();
var AppointmentListView = Backbone.View.extend({});
var appointmentListView = new AppointmentListView({collection: appointments });
Good morning. Last night you were so close to implementing the render function on AppointmentListView
but decided to take a nap, and here you are!
Go ahead and implement the addOne function, rendering an AppointmentView
for each model in the collection, and appending it to the collection view's top-level element.
Note There is a bug in the forEach
call. Make sure and fix it before submitting.
var Appointment = Backbone.Model.extend({});
var AppointmentList = Backbone.Collection.extend({
model: Appointment
});
var AppointmentView = Backbone.View.extend({
template: _.template('<span class="<%= if(cancelled){
print("cancelled");
} %>" + '<%= title %></span>'> + '<a href="#">x</a>'), render: function(){
this.$el.html(this.tamplate(this.model.toJSON()));
return this;
}
});
Answer:
var AppointmentListView = Backbone.View.extend({
render: function(){
this.collection.forEach(this.addOne,this);
},
addOne: function(model){
var appointmentView = new AppointmentView({model: model});
this.$el.append(appointmentView.render().el);
}
});
Wow, you are a hard worker! Let's see it pay off by rendering our collection view and inserting it into the DOM. Using theappend
or html
jQuery methods, insert the top-level element into the #app
div.
var appointmentsView = new AppointmentListView({collection: appointmentList});
$("#app").append(appointmentsView.render().el);
Uh oh. Dr. Goodparts is at it again, adding new models to the collection, and he's upset because when he adds a model, the DOM isn't updated.
In the AppointmentListView's
initialize
function, listen for the collections add
event and call the addOne
function to append the new model to the view.
Make sure you include the context argument to ensure addOne
is called with the correct context.
var AppointmentListView = Backbone.View.extend({
initialize: function(){
this.collection.on('add', this.addOne, this);
},
render: function(){
this.collection.forEach(this.addOne, this);
},
addOne: function(model){
var appointmentView = new AppointmentView({model: model});
appointmentView.render();
this.$el.append(appointmentView.el);
}
});
It's Monday morning and time to reset all the appointments for the week. You hear a screech from down the hall and seconds later Dr. Goodparts barges red-faced into your office because the DOM didn't update when he reset the collection.
Update the AppointmentListView to listen for the collection's reset
event to call the render
function.
Make sure you include the context argument to ensure render
is called with the correct context.
var AppointmentListView = Backbone.View.extend({
initialize: function(){
this.collection.on('add', this.addOne, this);
this.collection.on('reset', this.render, this);
},
render: function(){
this.collection.forEach(this.addOne, this);
},
addOne: function(model){
var appointmentView = new AppointmentView({model: model});
appointmentView.render();
this.$el.append(appointmentView.el);
}
});
Turns out one of the appointments in our collection was rescheduled for next week, but when Dr. Goodparts removed the appointment model from the collection, it wasn't removed from the DOM. You can imagine Dr. Goodparts reaction.
Fix this bug by using a custom event hide
on Appointment
models.
Update your AppointmentList
collection to trigger the hide
event on a model when it is removed.
Update your AppointmentView
to call the remove
function whenever its model fires the hide
event.
Appointment_list.js
var AppointmentList = Backbone.Collection.extend({
model: Appointment,
initialize: function(){
this.on('remove', this.hideModel);
},
hideModel: function(model){
model.trigger('hide');
}
});
Appointment_view.js
var AppointmentView = Backbone.View.extend({
initialize: function(){
this.model.on('hide', this.remove, this);
},
remove: function(){
this.$el.remove();
}
});
[Backbone]7. Collection Views, Custom Events的更多相关文章
- Advanced Collection Views and Building Custom Layouts
Advanced Collection Views and Building Custom Layouts UICollectionView的结构回顾 首先回顾一下Collection View的构成 ...
- Collection Views and Building Custom Layouts-备
UICollectionView的结构回顾 首先回顾一下Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header ...
- Collection View Programming Guide for iOS---(一)----About iOS Collection Views
Next About iOS Collection Views 关于iOS Collection Views A collection view is a way to present an orde ...
- EventEmitter & custom events & sub/pub
EventEmitter & custom events & sub/pub https://repl.it/@xgqfrms/PPLabs-frontend-answers // 5 ...
- -_-#【Backbone】Collection
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- backbone之collection
最近要用到backbone.js,网上也找了些资料,但是就看到一个开头还可以,往下看基本就看不下去了,幸好有这本书[LeanpubRead] Backbone.Marionette.js A Gent ...
- backbone.js 教程(1) View & Model & Collection
Backbone.js Overview 它由Jeremy Ashkenas开发,最初发行于2010-10-13 它是一个轻量的JavaScript类库,只依赖于underscore.js,非强制依赖 ...
- Backbone源码解析(三):Collection模块
Collection模块式是对分散在项目中model的收集,他可以存储所有的model,构成一个集合,并且通过自身的方法统一操作model.Collection模块包装着若干对象,对象本身不具有一些方 ...
- 【再探backbone 02】集合-Collection
前言 昨天我们一起学习了backbone的model,我个人对backbone的熟悉程度提高了,但是也发现一个严重的问题!!! 我平时压根没有用到model这块的东西,事实上我只用到了view,所以昨 ...
随机推荐
- 排序算法之快速排序Java实现
排序算法之快速排序 舞蹈演示排序: 冒泡排序: http://t.cn/hrf58M 希尔排序:http://t.cn/hrosvb 选择排序:http://t.cn/hros6e 插入排序:ht ...
- [BZOJ5303][HAOI2018]反色游戏(Tarjan)
暴力做法是列异或方程组后高斯消元,答案为2^自由元个数,可以得60分.但这个算法已经到此为止了. 从图论的角度考虑这个问题,当原图是一棵树时,可以从叶子开始唯一确定每条边的选择情况,所以答案为1. 于 ...
- 【BZOJ-1396&2865】识别子串&字符串识别 后缀自动机/后缀树组 + 线段树
1396: 识别子串 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 312 Solved: 193[Submit][Status][Discuss] ...
- tyvj 1031 热浪 最短路
热浪 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://tyvj.cn/p/1031 Description 德克萨斯纯朴的民眾们这个夏天正在遭受 ...
- windows下python2.7.14版本的安装
本文主要对window下如何安装Python进行图解说明 步骤一.从官网下载相应的版本(本文以2.7.14为例),https://www.python.org/downloads/release/py ...
- jsoncpp 0.5 ARM移植
1.下载jsonapp 0.5 https://github.com/open-source-parsers/jsoncpp 2.编译 platform 没有包含 arm 平台,需要把源码提取出来,独 ...
- ROS知识(8)----CMakeLists.txt文件编写的理解
ROS(Indigo)编程必须要理解CMakeList.txt的编写规则,教程地址:catkin/CMakeLists.txt,官网有相关的教程,中文的翻译版本写的很不错,教程地址:ROS中的CMak ...
- 详解Object.constructor
对象的constructor属性引用了该对象的构造函数.对于 Object 对象,该指针指向原始的 Object() 函数.如下: var obj = {}; obj.constructor //ƒ ...
- 使用NFS启动Tiny4412开发板根文件系统
1.Ubuntu14.04上搭建NFS服务 1.1.安装NFS服务 $ sudo apt-get install nfs-kernel-server //安装NFS服务 1.2 创建Tiny ...
- Installing Node.js via package manager | Node.js
Installing Node.js via package manager | Node.js i386 (32-bit)