ユーザーがビューの一部であるdivwith クラスをクリックすると、トリガーされる機能があります。この関数は、要素がクリックされたこのビューに属するモデルから属性を取得し、それを 経由でサーバー側に送信する必要があります。.photo_containerPhotoListViewsendSelectedPhotoIdphoto_idPhotodiv .photo_containerfetch()
問題:これまでのところ、 がクリックされたときに関数sendSelectedPhotoIdをトリガーすることができましたが、ビューのモデルdivの属性を取得する方法がわかりません。どうすればこれを達成できますか?photo_idPhoto
ちなみに、正しいものphoto_idが送られるかどうかはわかりません。
コード
$('#button').click( function() {
// Retrieve photos
this.photoList = new PhotoCollection();
var self = this;
this.photoList.fetch({
success: function() {
self.photoListView = new PhotoListView({ model: self.photoList });
$('#photo_list').html(self.photoListView.render().el);
}
});
});
モデルとコレクション
// Models
Photo = Backbone.Model.extend({
defaults: {
photo_id: ''
}
});
// Collections
PhotoCollection = Backbone.Collection.extend({
model: Photo,
url: 'splash/process_profiling_img'
});
ビュー
// Views
PhotoListView = Backbone.View.extend({
tagName: 'div',
events: {
'click .photo_container': 'sendSelectedPhotoId'
},
initialize: function() {
this.model.bind('reset', this.render, this);
this.model.bind('add', function(photo) {
$(this.el).append(new PhotoListItemView({ model: photo }).render().el);
}, this);
},
render: function() {
_.each(this.model.models, function(photo) {
$(this.el).append(new PhotoListItemView({ model: photo }).render().el);
}, this);
return this;
},
sendSelectedPhotoId: function() {
var self = this;
console.log(self.model.get('photo_id'));
self.model.fetch({
data: { chosen_photo: self.model.get('photo_id')},
processData: true,
success: function() {
}});
}
});
PhotoListItemView = Backbone.View.extend({
tagName: 'div',
className: 'photo_box',
template: _.template($('#tpl-PhotoListItemView').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.close, this);
},
render: function() {
$(this.el).html(this.template( this.model.toJSON() ));
return this;
},
close: function() {
$(this.el).unbind();
$(this.el).remove();
}
});
2 回目の試行
また、イベントハンドラーを配置して、モデルの属性を適切に取得できる場所に配置しようとsendSelectedPhotoIdしましたが、コレクションが fetch() を実行したときにイベントPhotoListItemViewをトリガーする方法がわかりません。resetPhotoList
意見
PhotoListItemView = Backbone.View.extend({
tagName: 'div',
className: 'photo_box',
events: {
'click .photo_container': 'sendSelectedPhotoId'
},
template: _.template($('#tpl-PhotoListItemView').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.close, this);
},
render: function() {
$(this.el).html(this.template( this.model.toJSON() ));
return this;
},
close: function() {
$(this.el).unbind();
$(this.el).remove();
},
sendSelectedPhotoId: function() {
console.log('clicked!');
var self = this;
console.log(self.model.get('photo_id'));
self.model.fetch({
data: { chosen_photo: self.model.get('photo_id')},
processData: true,
success: function() {
$(this.el).html('');
}});
}
});
問題:これにより、 in functionresetを実行した後にモデルのイベントを発生させることができないようです。つまり、 を使用してモデルを再レンダリングすることができません。fetch()sendSelectedPhotoIdPhotoListViewrender()
下の Chrome の JavaScript コンソールのスクリーンショットでは、 を実行した後にコレクションを印刷しましたsendSelectedPhotoId。2つの新しいモデルを作成して既存のモデルをすべて削除するのではなく、取得した新しいデータを既存のモデルに追加fetch()したようです!
