2013-07-03 15 views
11

Ho un'app in backbone che recupera i dati da un server. Questi dati sono hotel e foreach hotel Ho più stanze. Ho diviso albergo in JSON e JSON camere all'interno di un altro come questo:Raccolta nidificata backbone

hotel.json

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

rooms.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" 
    } 
] 

voglio prendere ogni albergo e si combinano con le sue camere (chiave esterna in rooms.jsonhotel_id) e stampare la combinazione delle stanze: livello foreach combinare stanze diverse.

Una camera di livello 1, una camera di livello 2 e una camera di livello 3.

massimo di livello è 3, ma che può avere un solo livello o solo due livelli. Se ho 3 livello non voglio combinazione di livello 1 e livello 2 senza livello 3.

Qualcosa di simile

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" 

Il costruttore di queste camere credo sia da inserire in renderRooms nella mia app.

Questa è la mia app:

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

Come si crea questa combinazione stanza e stamparlo?
C'è un buon modo o c'è qualcosa di meglio?

+0

Ho seguito le vostre altre domande riguardo a questo problema e sembra come te Hai diversi problemi che stai cercando di risolvere. Quello di cui hai veramente bisogno è la funzione cartesiana suggerita da @Bergi in questa domanda http://stackoverflow.com/questions/17417589/recursive-function-jquery-with-backbone. Continuerò su quella strada. –

+0

Ho già provato ma sembra che non funzioni, array del primo gruppoBy è vuoto Non so perché .. @moderndegree –

+0

Ho inviato un aggiornamento alla risposta di @ Bergi a questa domanda (http://stackoverflow.com/ domande/17417589/recursive-funzione-jquery-con-spina dorsale). Nel frattempo, puoi vedere un esempio operativo qui: http://plnkr.co/edit/NHE9V5?p=preview. –

risposta

20

Ecco come si può strutturare le Collezioni:

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

allora si può fare qualcosa di simile:

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

Ciao, so che questa è una vecchia risposta, ma le stanze non dovrebbero essere aggiunte a 'this.attributes', non solo 'questo' come non si può fare' model.get ('rooms') ' – Quince

+1

Questo è dovuto al fatto che' rooms' è una collezione e deve essere indirizzata direttamente, piuttosto che tramite 'get()' o 'set()'. Ad esempio, se dovessi chiamare 'set ('rooms', [])', la Collection sarebbe fuori sincrono. Supponevo che potessi rielaborarlo per ascoltare "change: rooms" e gestirlo in quel modo, ma mi è sembrato molto lavoro. –

+0

Se 'rooms' è una raccolta all'interno dell'hash degli attributi del modello, puoi semplicemente usare' get ('rooms'). Reset ([]) 'per evitare la raccolta fuori sincrono ed evitare di ascoltarlo. –

Problemi correlati