2

モデルがサーバーにリクエストを行う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 );
  }
});

listenToinは、ここVideoViewsで何が起こっているかをリッスンしています:add_to_user_arrayAddVideoView

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 );
        }
      });
    }
  })
}
4

2 に答える 2

0

「リクエスト」ではなく「同期」をリッスンする必要があります

request — モデル (またはコレクション) がサーバーへのリクエストを開始したとき

sync — モデル (またはコレクション) がサーバーと正常に同期されたとき

リクエストをリッスンすると、データが同期されてコレクションが更新されたときではなく、リクエスト時の現在のデータのみが表示されます。

于 2013-08-09T00:28:47.347 に答える