骨幹插入一個應用程序內的應用程序

Question

我有一個應用程序在主幹，我從服務器獲取數據並返回有關酒店的數據。 每個酒店可以包含很多房間（單人，雙人，三人..）。 爲此，我必須創建兩個JSON hotel.json：

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

rooms.json

[ 
    { 
     "room" : [ 
     { 
      "id" : "r1", 
      "hotel_id" : "1", 
      "name" : "Singola", 
     } 
     ] 
    }, 
    { 
     "room" : [ 
     { 
      "id" : "r1_1", 
      "hotel_id" : "1", 
      "name" : "Doppia", 
     } 
     ] 
    }, 
    { 
     "room" : [ 
     { 
      "id" : "r2", 
      "hotel_id" : "2", 
      "name" : "Singola", 
     } 
     ] 
    }, 
    { 
     "room" : [ 
     { 
      "id" : "r2_1", 
      "hotel_id" : "2", 
      "name" : "Tripla", 
     } 
     ] 
    }, 
    ] 

在rooms.json有一個域名爲HOTEL_ID到房間鏈接到其酒店。 嗯，這是我在骨幹網應用查看酒店：

var Hotel = Backbone.Model.extend({ 
      defaults: function() { 
       return { 
        name: 'HOTEL NAME', 
        star: '5' 
       } 
      } 
     }); 

     var HotelsCollection = Backbone.Collection.extend({ 
      model: Hotel, 
      url: "includes/test-data.json", 

      initialize: function(){ 
       console.log("Collection Hotel initialize"); 
      }, 

      parse: function(response){ 
       return(response); 
      }  
     }); 

     var HotelView = Backbone.View.extend({ 
      template: _.template($("#hotel-list-template").html()), 
      initialize: function(){ 
       this.collection = new HotelsCollection(); 
       this.collection.bind('sync', this.render, this); 
       this.collection.fetch(); 
      }, 
      render: function(){ 
       console.log('Data hotel is fetched'); 
       var element = this.$el; 
       element.html(''); 

       $(this.el).html(this.template({hotel: this.collection.models})); 
      } 
     }); 

這是我在uderscore模板：

<script type="text/template" id="hotel-list-template"> 
    <% _.each(hotel, function(name) { %> 
    <div id="hotel-container-<%= name.attributes.id %>"> 
     <p>Nome Hotel: <%= name.attributes.name %></p> 
    </div> 
    <% }); %> 
    </script> 

現在，我怎麼能插入同一div每間客房的酒店裏面？ 我想做一個經典模型，一個獲取數據但在渲染視圖中的集合，我如何告訴主幹只能將帶有hotel_id = 1的空間插入到id = hotel-container-1的div中？

------------------ UPDATE ---------------------

var Hotel = Backbone.Model.extend({ 
      defaults: function() { 
       return { 
        name: 'HOTEL NAME', 
        star: '5' 
       } 
      } 
     }); 

     var HotelsCollection = Backbone.Collection.extend({ 
      model: Hotel, 
      url: "includes/test-data.json", 

      initialize: function(){ 
       console.log("Collection Hotel initialize"); 
      }, 

      parse: function(response){ 
       return(response); 
      }, 
      getRooms : function() { 
       return _.map(allRooms.where({"hotel_id" : this.get("id")}), function(room) { 
        return room.toJSON(); 
       }); 
      }, 
      addRoom : function(room) { 
       room.set("hotel_id", this.get("id")); 
       allRooms.add(room); 
      }, 
      // this will return Backbone´s native toJSON Object 
      // with an extra field "rooms" which you can access 
      toJSON : function() { 
       var parent = Backbone.Collection.prototype.toJSON.call(this); 
       return _.extend({}, parent, {rooms : this.getRooms().toJSON()}); 
      } 
     }); 

     var HotelView = Backbone.View.extend({ 
      template: _.template($("#hotel-list-template").html()), 
      initialize: function(){ 
       this.collection = new HotelsCollection(); 
       this.collection.bind('sync', this.render, this); 
       this.collection.fetch(); 
      }, 
      render: function(){ 
       console.log('Data hotel is fetched'); 
       var viewModel = this.collection.toJSON(); 
       this.$el.html(this.template({models:viewModel})); 

      } 
     }); 


var Room = Backbone.Model.extend(); 
var Rooms = Backbone.Collection.extend({model:Room}); 

var allRooms = new Rooms(); 

     var hotelView = new HotelView({ 
      el: $("#hotel") 
     }); 

Answer 1

我建議我們在項目架構中添加一些更改。 首先我們需要改變hotel模式是這樣的：

{ 
    "id": "1", 
    "name": "Hotel1", 
    "rooms": [] 
} 

其次型號和款式：

var Room = Backbone.Model.extend(); 
var Rooms = Backbone.Collection.extend({ 
    model:Room, 
    url : "rooms.json" 
}); 
var Hotel = Backbone.Model.extend({}); 
var HotelCollection = Backbone.Collection.extend({ 
    model: Hotel, 
    url: "includes/test-data.json", 
    initialize: function(){ 
     console.log("Collection Hotel initialize"); 
    }, 

    parse: function(response) { 
     response.rooms = new Rooms(response.rooms); 
     return response; 
    }  
}); 

三查看：

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'); 
      bindRoomToHotel(); 
      var element = this.$el; 
      element.html(''); 

      $(this.el).html(this.template({hotel: this.collection.models})); 
     }, 

     bindRoomToHotel: function() { 
      allRooms = new Rooms(); 
      allRooms.fetch(); 
      _.each(this.collection.models, function(hotel) { 
       rooms = allRooms.where({'hotel_id' : hotel.id}); 
       // 
       currentHotelRooms = hotel.get('rooms'); 
       currentHotelRooms.add(rooms); 
       // or You can write like 
       // hotel.get('rooms').add(rooms); 
      } 
     } 
    }); 
    var hotelView = new HotelView({ 
     el: $("#hotel") 
    }); 

我想這是所有。我希望它可以幫助你

Answer 2

您可以創建一個房間模型，然後創建一個房間集合。然後，您將房間添加爲HotelView的房產。然後你調用一個獲取和使用過濾器：

var HotelView = Backbone.View.extend({ 
     template: _.template($("#hotel-list-template").html()), 
     initialize: function(){ 
      this.collection = new HotelsCollection(); 
      this.collection.bind('sync', this.render, this); 
      this.collection.fetch(); 

      this.rooms = new RoomsCollection(); 
      this.rooms.fetch(); 

      var self = this; 
      this.rooms = this.rooms.filter(function(room){ 
         return room.get("hotel_id") === self.get("id"); 
       }) 
     }, 

然後，你只需要添加房間的div。如果您的應用程序非常複雜，則可以爲房間創建視圖。

以下是過濾器功能的docs。

編輯：你爲一個房間創建一個模板。然後在酒店模板中輸入一個帶有＃房間號的空格。然後爲每個房間你append模板在這個div。

Answer 3

首先，你缺少一個房間模型和一個房間集合 然後，你應該有一個實例在你房間的某個地方。

var Room = Backbone.Model.extend(); 
var Rooms = Backbone.Collection.extend({ 
    model:Room, 
    url : "rooms.json" 
}); 

var allRooms = new Rooms(); 

很簡單，直到這裏。

沒有你會給你的酒店模型的一些方法，這將啓用一些操作爲您的房間

var Hotel = Backbone.Model.extend({ 
    getRooms : function() { 
     return _.map(allRooms.where({"hotel_id" : this.get("id")}), function(room) { 
      return room.toJSON(); 
     }); 
    }, 
    addRoom : function(room) { 
     room.set("hotel_id", this.get("id")); 
     allRooms.add(room); 
    }, 
    // this will return Backbone´s native toJSON Object 
    // with an extra field "rooms" which you can access 
    toJSON : function() { 
     var parent = Backbone.Model.prototype.toJSON.call(this); 
     return _.extend({}, parent, {rooms : this.getRooms().toJSON()}); 
    } 
}); 
var HotelsCollection = Backbone.Collection.extend({ 
    model: Hotel, 
    url: "includes/test-data.json", 
    initialize: function(){ 
     console.log("Collection Hotel initialize"); 
    }, 
    parse: function(response){ 
     return(response); 
    } 

}); 

這只是一個樣品，你可以做更多的出於此。

現在

在渲染功能....

你可以把任何東西到下劃線渲染方法。

例如：

render : function() { 
    //this will give you a nice formatted array (see toJSON override above) 
    var viewModel = this.collection.toJSON(); 
    this.$el.html(this.template({models:viewModel}); 
} 

在你看來，現在，您可以訪問你的 「房間」 陣列...

<script type="text/template" id="hotel-list-template"> 
    <% _.each(models, function(hotel) { %> 
    <div id="hotel-container-<%= hotel.id %>"> 
     <p>Nome Hotel: <%= hotel.name %></p> 
     <ul> 
     <% _.each(hote.rooms, function(room) { %> 
      <li><%=room.name%></li> 
     <% }); %> 
     </ul> 
    </div> 
    <% }); %> 
</script>