javascript - tutorial - Colección anidada de columna vertebral

backbonejs github

Question

Tengo una aplicación en la red troncal que recupera datos de un servidor. Estos datos son hoteles y hoteles foreach. Tengo más habitaciones. He dividido hotel en un json y salas dentro de otro json como este:

hotel.json

[
{
"id": "1",
"name": "Hotel1"
},
{
"id": "2",
"name": "Hotel2"
},
{
"id": "3",
"name": "Hotel3"
}
]

habitaciones.json

[
{
"id" : "r1",
"hotel_id" : "1",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r1_1",
"hotel_id" : "1",
"name" : "Doppia",
"level" : "2"
},
{
"id" : "r1_3",
"hotel_id" : "1",
"name" : "Doppia Uso singol",
"level" : "1"
},
{
"id" : "r2",
"hotel_id" : "2",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r2_1",
"hotel_id" : "2",
"name" : "Tripla",
"level" : "1"
}
]

Quiero tomar cada hotel y combinarlo con sus habitaciones (clave externa en rooms.json hotel_id ) e imprimir la combinación de las habitaciones: foreach level combine different rooms.

Una habitación de nivel 1, una habitación de nivel 2 y una habitación de nivel 3.

El nivel máximo es 3 pero puedo tener solo un nivel o solo dos niveles. Si tengo 3 niveles, no quiero la combinación del nivel 1 y el nivel 2 sin el nivel 3.

Algo como esto

Room "Single", "level" : "1" , "hotel_id" : "1"
Room "Double", "level" : "2" , , "hotel_id" : "1"
Room "Triple", "level" : "3" , , "hotel_id" : "1"

Room "Double for single", "level" : "1" , "hotel_id" : "1"
Room "Double", "level" : "2" , , "hotel_id" : "1"
Room "Triple", "level" : "3" , , "hotel_id" : "1"

El constructor de estas salas, creo, es para ponerlas en mi aplicación.

Esta es mi aplicación:

var Room = Backbone.Model.extend();
var Rooms = Backbone.Collection.extend({
model: Room,
url: "includes/rooms.json"
});
var Hotel = Backbone.Model.extend({
defaults: function() {
return {
"id": "1",
"name": "Hotel1",
"rooms": []
}
}
});
var HotelCollection = Backbone.Collection.extend({
model: Hotel,
url: "includes/test-data.json",
initialize: function() {
console.log("Collection Hotel initialize");
}
});
var HotelView = Backbone.View.extend({
template: _.template($("#hotel-list-template").html()),
initialize: function() {
this.collection = new HotelCollection();
this.collection.bind(''sync'', this.render, this);
this.collection.fetch();
},
render: function() {
console.log(''Data hotel is fetched'');
this.bindRoomToHotel();
var element = this.$el;
element.html('''');
},
bindRoomToHotel: function() {
allRooms = new Rooms();
allRooms.on("sync", this.renderRooms, this)
allRooms.fetch();
},
renderRooms: function() {
$(this.el).html(this.template({ hotels: this.collection.models }));
}
});
var hotelView = new HotelView({
el: $("#hotel")
});

¿Cómo puedo crear esta combinación de sala e imprimirla?
¿Hay una buena manera o hay algo mejor?

Answer 1

Aquí es cómo puedes estructurar las Colecciones:

HotelModel = Backbone.Model.extend({
initialize: function() {
// because initialize is called after parse
_.defaults(this, {
rooms: new RoomCollection
});
},
parse: function(response) {
if (_.has(response, "rooms")) {
this.rooms = new RoomCollection(response.rooms, {
parse: true
});
delete response.rooms;
}
return response;
},
toJSON: function() {
var json = _.clone(this.attributes);
json.rooms = this.rooms.toJSON();
return json;
}
});
RoomModel = Backbone.Model.extend({
});
HotelCollection = Backbone.Collection.extend({
model: HotelModel
});
RoomCollection = Backbone.Collection.extend({
model: RoomModel
});

Entonces puedes hacer algo como esto:

var hotels = new HotelCollection();
hotels.reset([{
id: 1,
name: ''Hotel California'',
rooms: [{
id: 1,
name: ''Super Deluxe''
}]
}], {
parse: true // tell the collection to parse the data
});
// retrieve a room from a hotel
hotels.get(1).rooms.get(1);
// add a room to the hotel
hotels.get(1).rooms.add({id:2, name:''Another Room''});