私は、サイトのフロント エンドで 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
});
});
ありがとうございました