underscore tutorial significado react network meaning backbonejs backbone javascript backbone.js backbone-collections

javascript - tutorial - Colección anidada de columna vertebral



backbonejs github (1)

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?


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