我和一位自由职业者开始了一个项目，他为我的网站前端做了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之前添加一个初始循环，但我无法确定从哪里开始或如何解决这个问题。有人能指出我正确的方向吗？
MY GALLERY 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
});
});
三江源
答案 0 :(得分：2)
我相信你想添加一个额外的_each，并略微改变现有的_each。如果此代码不是100％，请道歉，因为它可能需要调整以适合您的数据;
// Loop through your data, as each category
_.each(this.collection.models, function(category){
// Loop through each image within the category
_.each(category, function(image){
// Output your image
var image_link='<a class="fancybox" href="'+image.get('path')+'">'+
'<img alt="" src="'+image.get('thumb_path')+'">'+
'</a>';
$main.append(image_link);
});
});
为了更好地解释一下，你想要从循环改变只是图像;
[
{
"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"
}
]
...循环遍历每个类别，然后是该类别中的每个图像;
[
{
"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"
}
]
}
]
答案 1 :(得分：1)
我最终按照以下方式开始工作：
_.each(this.collection.models, function(group){
_.each(group.attributes,function(image_category,index){
console.log(image_category);
//Following code is quick fix for getting categiry name, but will be replaced later.
$main.append('<h4 style="float: left; margin-bottom: 15px;">'+index+'</h4><br clear="left">');
_.each(image_category,function(image){
var link='<a href="'+image.path+'" class="fancybox" rel="'+index+'"><img class="gallery_thumb" src="'+image.thumb_path+'"/></a>';
$main.append(link);
});
$main.append('<br/>');
});
});
请注意添加到image_categroy循环的索引。
由于
答案 2 :(得分：0)
无需更正_.each循环..您必须实际更新从JSON设置此视图集合的行。
你可能正在使用这个旧的json创建一个集合对象...它可能是这样的
var imageCollection = new ImageCollection(JSON);
使用新的JSON结构，它应该像这样
var imageCollection = new ImageCollection(JSON.Restorations);
PS：让我知道你的担忧......我会继续更新答案，直到你认为它有效为止。