本文介绍了骨干插入一个App一个App里的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在那里的骨干，我从服务器获取数据并返回我的数据有关酒店的应用程序。每家酒店可以包含很多房间（单人，双人，三人..）。为此，我必须创建两个JSONhotel.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里
发布评论