javascript - Backbone .fetch() 未使用最新数据更新集合

Question

当 user 模型向服务器发出请求时，我试图更新过滤后的 video 集合。问题出在 update 方法中。 fetch() 没有获取 video 集合的最新数据。

我需要在 update 中修复什么才能获取最新数据，以便正确重新呈现 View ？

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

VideoViews 中的 listenTo 正在监听 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 );
        }
      });
    }
  })
}

Answer 1

第一个fetch是异步

因此，您正尝试在获取请求后立即过滤集合。但是它们后面的语句将立即执行而无需等待新数据。如果你想要新的数据在手，你需要监听 reset 事件或者集合的 sync 事件。如果您直接使用 this 将通用 attributes 附加到 View 也是一个更好的主意。试试这个

var VideosView = Backbone.View.extend({
    tagName: 'ul',
    id: 'video-list',

    initialize: function () {
        // Model
        this.user = this.model;
        // collection passed in
        this.videos = this.collection;
        // videos on model
        this._videos = user.get('videos');
        // filtered collection
        this.user_vids = videos.filter_videos(this._videos);
        // Listen to sync request on model
        this.listenTo(user, 'sync', this.update);
        // Listen to the video collection 
        // which will call the method once the collection is refreshed
        this.listenTo(this.videos, 'reset', this.resetVideos);
    },
    update: function () {
        $('#video-list').empty();
        _.delay( function() {
            // You already have access to videos
            // in the form of this.videos
            this.videos.fetch({reset: true});
        }, 100 );
    },
    resetVideos: function () {
        // Build the new user_vids collection from
        // newly fetch videos collection
        this.user_vids = this.videos.filter_videos(this._videos)
        this.user_vids.each(this.addOne, this);
    },
    addOne: function (video) {
        var videoView = new VideoView({
            model: video
        });
        this.$el.append(videoView.render().el);
    },
    render: function () {
        this.user_vids.each(this.addOne, this);
        return this;
    }
});

让我知道注释是否有意义或者我在某处误解了。