我在主干中有一个应用程序,我从服务器获取数据并返回有关酒店的数据。每家酒店都可以包含许多房间(单人房、双人房、三人房……)。为此,我创建了两个 json hotel.json:
[
{
"id": "1",
"name": "Hotel1"
},
{
"id": "2",
"name": "Hotel2"
},
{
"id": "3",
"name": "Hotel3"
}
]
房间.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}));
}
});
这是我在 udscore 中的模板:
<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 中?
- - - - - - - - - 更新 - - - - - - - - - - -
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")
});