1
我與一位自由職業者開始了一個項目，他爲我爲網站的前端做了BacboneJS，但他們從未完成。我現在需要完成它，沒有骨幹經驗。他們已經爲我的圖片庫頁面設置了下面的代碼來循環顯示所有圖像並顯示在屏幕上，但是我需要它來循環類別和圖像內的圖像，以便它們與類別標題一起分組在頂部。將圖像循環轉換爲循環內的類別和圖像
我當前的代碼如下：
render_gallery: function(){
var $main=this.$el.find('.content-wrap');
$main.html("");
var $ul=$main.find("ul");
_.each(this.collection.models, function(image){
var image_link='<a class="fancybox" href="'+image.get('path')+'">'+
'<img alt="" src="'+image.get('thumb_path')+'">'+
'</a>';
$main.append(image_link);
});
$('.fancybox').fancybox();
}
這從JSON數據運行（段只）：
[{"id":"5","gallery_cat_id":"2","name":"rfg","path":"\/cms\/app\/webroot\/files\/images\/img2.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/img2.jpg","size":"149944","sort_order":"10","online":true,"created":"2013-08-16 10:24:37","modified":"2013-08-17 08:37:05"},{"id":"7","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060956.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060956.jpg","size":"404269","sort_order":"1","online":true,"created":"2013-08-22 15:30:40","modified":"2013-08-22 15:30:40"},{"id":"8","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060959.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060959.jpg","size":"258454","sort_order":"2","online":true,"created":"2013-08-22 15:30:57","modified":"2013-08-22 15:30:57"},
但是我現在有這個JSON數據（僅摘錄）：
[{"Restorations":[{"id":"7","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060956.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060956.jpg","size":"404269","sort_order":"1","online":true,"created":"2013-08-22 15:30:40","modified":"2013-08-22 15:30:40"},{"id":"8","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060959.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060959.jpg","size":"258454","sort_order":"2","online":true,"created":"2013-08-22 15:30:57","modified":"2013-08-22 15:30:57"},{"id":"9","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060964.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060964.jpg","size":"309197","sort_order":"3","online":true,"created":"2013-08-22 15:31:10","modified":"2013-08-22 15:31:10"},{"id":"10","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1060972.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1060972.jpg","size":"195725","sort_order":"4","online":true,"created":"2013-08-22 15:31:49","modified":"2013-08-22 15:32:40"},{"id":"11","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p1070598.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p1070598.jpg","size":"229989","sort_order":"5","online":true,"created":"2013-08-22 15:32:02","modified":"2013-08-22 15:32:02"},{"id":"12","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/p10705991.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/p10705991.jpg","size":"250559","sort_order":"6","online":true,"created":"2013-08-22 15:32:14","modified":"2013-08-22 15:32:14"},{"id":"13","gallery_cat_id":"1","name":"","path":"\/cms\/app\/webroot\/files\/images\/pic_3.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/pic_3.jpg","size":"191162","sort_order":"7","online":true,"created":"2013-08-22 15:32:27","modified":"2013-08-22 15:32:27"}],"Second Category - Sample":[{"id":"5","gallery_cat_id":"2","name":"rfg","path":"\/cms\/app\/webroot\/files\/images\/img2.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/img2.jpg","size":"149944","sort_order":"10","online":true,"created":"2013-08-16 10:24:37","modified":"2013-08-17 08:37:05"},{"id":"14","gallery_cat_id":"2","name":"","path":"\/cms\/app\/webroot\/files\/images\/tlbday3.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/tlbday3.jpg","size":"25207","sort_order":"2","online":true,"created":"2013-08-23 14:20:04","modified":"2013-08-23 14:20:04"},{"id":"16","gallery_cat_id":"2","name":"","path":"\/cms\/app\/webroot\/files\/images\/partyhats.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/partyhats.jpg","size":"12955","sort_order":"0","online":true,"created":"2013-08-23 14:20:44","modified":"2013-08-23 14:20:44"},{"id":"18","gallery_cat_id":"2","name":"","path":"\/cms\/app\/webroot\/files\/images\/hrc_syd_a5_happyhour_low.jpg","thumb_path":"\/cms\/app\/webroot\/files\/images\/thumbs\/hrc_syd_a5_happyhour_low.jpg","size":"205515","sort_order":"0","online":true,"created":"2013-08-23 14:21:55","modified":"2013-08-27 17:16:28"}]}]
隨着恢復是第一類返回與此圖像。
我猜我需要以某種方式在執行_each之前添加一個初始循環，但我無法確定從哪裏開始或如何去做這件事。有人能指引我朝着正確的方向嗎？
我的畫廊MODEL CODE
$(function() {
window.app = window.app || { };
window.app.Gallery = Backbone.Model.extend({
urlRoot: 'cms/gallery_cats',
defaults: {
id: "",
description: ""
},
initialize: function(){
this.on('change',function(model){
// alert(this.get('description'));
});
},
parse : function(resp) {
return resp;
}
});
window.app.GalleryCollection = Backbone.Collection.extend({
url: 'cms/gallery_cats',
model: app.Gallery
});
});
畫廊查看代碼
$(function() {
window.app = window.app || { };
window.app.Gallery = Backbone.Model.extend({
urlRoot: 'cms/gallery_cats',
defaults: {
id: "",
description: ""
},
initialize: function(){
this.on('change',function(model){
// alert(this.get('description'));
});
},
parse : function(resp) {
return resp;
}
});
window.app.GalleryCollection = Backbone.Collection.extend({
url: 'cms/gallery_cats',
model: app.Gallery
});
});
三江源
謝謝。這不是要修復收到的畫廊嗎？ Restorations只是第一個，在同一個json下面有很多。謝謝 – sluggerdog