Jquery 主干将应用程序插入到应用程序中

我在主干网中有一个应用程序，我从服务器上获取数据并返回有关酒店的数据。 每家酒店可容纳多个房间（单人房、双人房、三人房……）。 为此，我创建了两个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>

---

可以创建房间模型，然后创建房间集合。然后添加房间作为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。如果你的应用程序很复杂，你可以为房间创建视图

下面是filter函数的示例

---

编辑：为一个房间创建样板。然后在酒店模板中放置一个带有#rooms id的空div。然后，对于每个房间，将模板放在该div中。

首先，您缺少一个房间模型和一个房间集合 那么，你应该在你所有房间的某个地方有一个实例

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

现在在您的视图中，您可以访问“房间”阵列

诺姆酒店：

我建议我们对项目架构进行一些更改首先我们需要改变

酒店

模式如下：

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

---

我想就这些了。我希望它能帮助你

在这里之前，我已经很好地理解了，但是在如何将房间添加到div之后，还不清楚如何做。你能完成你的回答吗？用你的例子我检索到这个.rooms emptyInteresting解决方案，不是很清楚，例如在rendere中返回我错误，“不能调用未定义的方法toJSON”我不明白什么是hotels.hotels当然是你的“this.collection”。我没有看你的命名惯例。在您的例子中，应该是“this.collection.toJSON（）”。阅读Backbone.Collection和Backbone.Model的文档。有点担心，但我现在不知道你到底在做什么。但在我看来，你的错误似乎与我描述的有所不同，我像你的例子那样做了，但没有返回我的部分是你加载json的地方。我想把它放进RoomCOllection来解析，请用你现在拥有的更新你的问题。或者把你的东西放到JSFIDLE或jsbin中，这样我们就可以解决它了谢谢今晚我将尝试这个解决方案！我不理解您的第一部分，但如果我使用您的代码，将返回以下错误：Object[Object Array]没有方法“add”。你能帮我一下吗？@AlessandroMinoccheri，我编辑了我的答案，我想，现在它没有显示错误，我已经看到并接受了正确的答案。谢谢+1为solution@AlessandroMinoccheri如果我能为你做点什么我很高兴

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