モデルがサーバーにリクエストを行うvideo
ときに、フィルター処理されたコレクションを更新しようとしています。user
問題はupdate
方法にあります。コレクションfetch()
の最新データを取得しません。video
update
ビューが適切に再レンダリングされるように最新のデータを取得するには、何を修正する必要がありますか?
var VideosView = Backbone.View.extend({
tagName: 'ul',
id: 'video-list',
initialize: function() {
var user = this.model;
var _videos = user.get('videos');
user_vids = videos.filter_videos(_videos);
this.listenTo(user, 'request', this.update);
},
render: function() {
user_vids.each( this.addOne, this );
return this;
},
addOne: function(video) {
var videoView = new VideoView({ model: video });
this.$el.append( videoView.render().el );
},
update: function() {
$('#video-list').empty();
_videos = this.model.get('videos');
videos.fetch();
user_vids = videos.filter_videos(_videos)
user_vids.each( this.addOne, this );
}
});
// Instantiate
var videosView = new VideosView({
model: user,
collection: videos
});
$('#allVideos').append( videosView.render().el );
編集
コードを追加する:
ここでvideosView
初期化します。
var IndexView = Backbone.View.extend({
initialize: function() {
user = this.model;
},
render: function() {
var videosView = new VideosView({
model: user,
collection: videos
});
$('#allVideos').append( videosView.render().el );
var addVideoView = new AddVideoView({
model: user,
collection: videos
});
$('#addVideo').append( addVideoView.render().el );
}
});
listenTo
inは、ここVideoViews
で何が起こっているかをリッスンしています:add_to_user_array
AddVideoView
var AddVideoView = Backbone.View.extend({
tagName: 'div',
template: _.template( AddVideoTemplate ),
events: {
'click #videoSubmitButton': 'submit'
},
initialize: function() {
user = this.model;
},
render: function() {
var template = this.template();
this.$el.html(template);
return this;
},
submit: function(event) {
event.preventDefault();
console.log('form submitted');
var vimeo_id = parseInt( $('#vimeo_id').val() );
var newVideo = {vimeo_id: vimeo_id};
this.collection.create(newVideo, {wait: true});
this.add_to_user_array(vimeo_id);
},
add_to_user_array: function(vimeo_id) {
var _videos = user.get('videos');
_videos.push(vimeo_id);
user.save({videos: _videos}, {wait: true});
}
});
ルーター内で、モデルとコレクションをインスタンス化しています。
index: function() {
users = new Users;
users.fetch({
success: function(user_data) {
var user = user_data.findWhere({username: App.username})
videos = new Videos;
videos.fetch({
success: function(video_data) {
var indexView = new IndexView({
model: user,
collection: videos
});
var indexController = new IndexController;
indexController.showView( indexView );
}
});
}
})
}