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 addOnefunction 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的更多相关文章

  1. Advanced Collection Views and Building Custom Layouts

    Advanced Collection Views and Building Custom Layouts UICollectionView的结构回顾 首先回顾一下Collection View的构成 ...

  2. Collection Views and Building Custom Layouts-备

    UICollectionView的结构回顾 首先回顾一下Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header ...

  3. 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 ...

  4. EventEmitter & custom events & sub/pub

    EventEmitter & custom events & sub/pub https://repl.it/@xgqfrms/PPLabs-frontend-answers // 5 ...

  5. -_-#【Backbone】Collection

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. backbone之collection

    最近要用到backbone.js,网上也找了些资料,但是就看到一个开头还可以,往下看基本就看不下去了,幸好有这本书[LeanpubRead] Backbone.Marionette.js A Gent ...

  7. backbone.js 教程(1) View & Model & Collection

    Backbone.js Overview 它由Jeremy Ashkenas开发,最初发行于2010-10-13 它是一个轻量的JavaScript类库,只依赖于underscore.js,非强制依赖 ...

  8. Backbone源码解析(三):Collection模块

    Collection模块式是对分散在项目中model的收集,他可以存储所有的model,构成一个集合,并且通过自身的方法统一操作model.Collection模块包装着若干对象,对象本身不具有一些方 ...

  9. 【再探backbone 02】集合-Collection

    前言 昨天我们一起学习了backbone的model,我个人对backbone的熟悉程度提高了,但是也发现一个严重的问题!!! 我平时压根没有用到model这块的东西,事实上我只用到了view,所以昨 ...

随机推荐

  1. 排序算法之快速排序Java实现

    排序算法之快速排序 舞蹈演示排序: 冒泡排序: http://t.cn/hrf58M 希尔排序:http://t.cn/hrosvb  选择排序:http://t.cn/hros6e  插入排序:ht ...

  2. [BZOJ5303][HAOI2018]反色游戏(Tarjan)

    暴力做法是列异或方程组后高斯消元,答案为2^自由元个数,可以得60分.但这个算法已经到此为止了. 从图论的角度考虑这个问题,当原图是一棵树时,可以从叶子开始唯一确定每条边的选择情况,所以答案为1. 于 ...

  3. 【BZOJ-1396&2865】识别子串&字符串识别 后缀自动机/后缀树组 + 线段树

    1396: 识别子串 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 312  Solved: 193[Submit][Status][Discuss] ...

  4. tyvj 1031 热浪 最短路

    热浪 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://tyvj.cn/p/1031 Description 德克萨斯纯朴的民眾们这个夏天正在遭受 ...

  5. windows下python2.7.14版本的安装

    本文主要对window下如何安装Python进行图解说明 步骤一.从官网下载相应的版本(本文以2.7.14为例),https://www.python.org/downloads/release/py ...

  6. jsoncpp 0.5 ARM移植

    1.下载jsonapp 0.5 https://github.com/open-source-parsers/jsoncpp 2.编译 platform 没有包含 arm 平台,需要把源码提取出来,独 ...

  7. ROS知识(8)----CMakeLists.txt文件编写的理解

    ROS(Indigo)编程必须要理解CMakeList.txt的编写规则,教程地址:catkin/CMakeLists.txt,官网有相关的教程,中文的翻译版本写的很不错,教程地址:ROS中的CMak ...

  8. 详解Object.constructor

    对象的constructor属性引用了该对象的构造函数.对于 Object 对象,该指针指向原始的 Object() 函数.如下: var obj = {}; obj.constructor //ƒ ...

  9. 使用NFS启动Tiny4412开发板根文件系统

      1.Ubuntu14.04上搭建NFS服务 1.1.安装NFS服务 $ sudo apt-get install nfs-kernel-server    //安装NFS服务 1.2 创建Tiny ...

  10. Installing Node.js via package manager | Node.js

    Installing Node.js via package manager | Node.js   i386 (32-bit)