骨干插入一个App一个App里 [英] Backbone insert an App inside an App
本文介绍了骨干插入一个App一个App里的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在那里的骨干，我从服务器获取数据并返回我的数据有关酒店的应用程序。
每家酒店可以包含很多房间（单人，双人，三人..）。
为此，我必须创建两个JSON
hotel.json：
[
{
ID：1
名：酒店1
}，
{
ID：2
名：饭店2
}，
{
ID：3
名：3
}
]
rooms.json
[
{
房间：
{
ID：R1，
HOTEL_ID：1，
名：Singola
}
]
}，
{
房间：
{
ID：r1_1
HOTEL_ID：1，
名：DOPPIA
}
]
}，
{
房间：
{
ID：R2，
HOTEL_ID：2，
名：Singola
}
]
}，
{
房间：
{
ID：r2_1
HOTEL_ID：2，
名：Tripla
}
]
}，
]
在rooms.json有一个叫HOTEL_ID到房间链接到其酒店领域。
嗯，这是我在骨干网应用查看酒店：
VAR酒店= Backbone.Model.extend（{
默认设置：功能（）{
返回{
名称：酒店名称，
明星：'5'
}
}
}）; VAR HotelsCollection = Backbone.Collection.extend（{
型号：酒店，
网址：包括/测试data.json 初始化：功能（）{
的console.log（精选酒店初始化）;
}， 解析：功能（响应）{
返回（响应）;
}
}）; VAR HotelView = Backbone.View.extend（{
模板：_.template（$（＃酒店列表模板）HTML（）。）
初始化：功能（）{
this.collection =新HotelsCollection（）;
this.collection.bind（'同步'，this.render，这一点）;
this.collection.fetch（）;
}，
渲染：功能（）{
的console.log（数据酒店取'）;
。VAR元=这个耗资埃尔;
element.html（''）; $（this.el）的.html（this.template（{酒店：this.collection.models}））;
}
}）;
这是我在uderscore模板：
＆LT;脚本类型=文/模板ID =酒店表模板＆GT;
＆LT;％_.each（酒店，函数（名称）{％GT;
＆LT; DIV ID =酒店盛器＆LT;％= name.attributes.id％GT;＆GT;
＆LT; P＆GT;酒店名称：＆LT;％= name.attributes.name％GT;＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆所述;％}）; ％GT;
＆LT; / SCRIPT＆GT;
现在，我怎么可以插入在同一个DIV每间客房的饭店内？
我鑫卡特做一个经典的模式，即获取数据，但在视图渲染我怎么能告诉骨干只与HOTEL_ID = 1间插入到id股利集合=酒店容器-1？
------------------更新---------------------
VAR酒店= Backbone.Model.extend（{
默认设置：功能（）{
返回{
名称：酒店名称，
明星：'5'
}
}
}）; VAR HotelsCollection = Backbone.Collection.extend（{
型号：酒店，
网址：包括/测试data.json 初始化：功能（）{
的console.log（精选酒店初始化）;
}， 解析：功能（响应）{
返回（响应）;
}，
getRooms：功能（）{
返回_.map（allRooms.where（{HOTEL_ID：this.get（ID）}），功能（室）{
返回room.toJSON（）;
}）;
}，
addRoom：功能（室）{
room.set（HOTEL_ID，this.get（ID））;
allRooms.add（室）;
}，
//这将返回Backbone's本地的toJSON对象
//使用一个额外的字段房间，你可以访问
的toJSON：功能（）{
VAR父= Backbone.Collection.prototype.toJSON.call（本）;
返回_.extend（{}，父母，{客房：this.getRooms（）的toJSON（）}）;
}
}）; VAR HotelView = Backbone.View.extend（{
模板：_.template（$（＃酒店列表模板）HTML（）。）
初始化：功能（）{
this.collection =新HotelsCollection（）;
this.collection.bind（'同步'，this.render，这一点）;
this.collection.fetch（）;
}，
渲染：功能（）{
的console.log（数据酒店取'）;
VAR视图模型= this.collection.toJSON（）;
这$ el.html（this.template（{机型：视图模型}））; }
}）;
变种间= Backbone.Model.extend（）;
VAR客房总数= Backbone.Collection.extend（{模式：房}）;VAR allRooms =新客房（）; VAR hotelView =新HotelView（{
EL：$（＃酒店）
}）;
解决方案
我建议我们增加了一些改变项目结构。 首先：我们需要改变酒店模式是这样的：
{
ID：1
名：酒店1，
房间：[]
}
其次产品型号及系列：
VAR房= Backbone.Model.extend（）;
VAR客房总数= Backbone.Collection.extend（{
型号：房间，
网址：rooms.json
}）;
变种酒店= Backbone.Model.extend（{}）;
VAR HotelCollection = Backbone.Collection.extend（{
型号：酒店，
网址：包括/测试data.json
初始化：功能（）{
的console.log（精选酒店初始化）;
}， 解析：功能（响应）{
response.rooms =新房间（response.rooms）;
返回响应;
}
}）;
第三查看：
VAR HotelView = Backbone.View.extend（{
模板：_.template（$（＃酒店列表模板）HTML（）。）
初始化：功能（）{
this.collection =新HotelCollection（）;
this.collection.bind（'同步'，this.render，这一点）;
this.collection.fetch（）;
}，
渲染：功能（）{
的console.log（数据酒店取'）;
bindRoomToHotel（）;
。VAR元=这个耗资埃尔;
element.html（''）; $（this.el）的.html（this.template（{酒店：this.collection.models}））;
}， bindRoomToHotel：功能（）{
allRooms =新客房（）;
allRooms.fetch（）;
_.each（this.collection.models，功能（酒店）{
房间= allRooms.where（{'HOTEL_ID'：hotel.id}）;
//
currentHotelRooms = hotel.get（'房间'）;
currentHotelRooms.add（间）;
//或者你可以这样写
// hotel.get（'房间'）加（间）;
}
}
}）;
VAR hotelView =新HotelView（{
EL：$（＃酒店）
}）;
我想这就是一切。我希望它帮助你。
I have an app in backbone where I get data from a server and return me data about hotel. Each hotel can contain many rooms (Single, double, triple..). For this I have create two 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",
}
]
},
]
In rooms.json there is a field called hotel_id to link rooms to its hotel. Well this is my app in backbone to view hotel:
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}));
}
});
This is my template in 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>
Now, how can I insert each room inside its hotel in the same div? I thinked to make a classic model, a collection that fetch data but in the view in the render how can I tell to backbone to insert only room with hotel_id=1 to the div with id=hotel-container-1?
------------------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")
});
解决方案
I advise We add some changes to project architecture. Firstly We need to change hotel model like this:
{
"id": "1",
"name": "Hotel1",
"rooms": []
}
Secondly Model and Collection :
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;
}
});
Third View :
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")
});
I guess it is all. I hope it help You
这篇关于骨干插入一个App一个App里的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
