[Backbone]6. Collections.

最新推荐文章于 2025-08-11 01:12:22 发布

转载最新推荐文章于 2025-08-11 01:12:22 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/3887500.html

文章标签：

#json

本文介绍如何使用Backbone.js创建一个管理预约集合的实例，包括如何初始化集合、加载JSON数据、从服务器获取数据、监听集合变化以及优化数据加载体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'));
});

转载于:https://www.cnblogs.com/Answer1215/p/3887500.html