骨干插入一个应用程序内的应用程序

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>