我和一个自由职业者开始了一个项目，他为我做一个网站前端的 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 之前以某种方式添加一个初始循环，但我无法确定从哪里开始或如何去做。有人可以指出我正确的方向吗？
我的画廊型号代码
$(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
});
});
谢谢