Question

当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中的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 );
        }
      });
    }
  })
}

Answer 1

首先fetch是异步

所以你试图在获取请求后立即过滤集合。但是它们之后的语句将立即执行而无需等待新数据。如果您想要掌握新数据，则需要收听集合的reset事件或同步事件。如果您使用attributes直接将常见this附加到视图，也是一个更好的主意。试试这个

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

让我知道这些笔记是否有意义或我在某处误解了。

Answer 2

你应该听“同步”而不是“请求”

request - 当模型（或集合）已启动对服务器的请求时

同步 - 当模型（或集合）已成功与服务器同步时

通过收听请求，您只会在请求时看到当前数据，而不是在同步数据和更新集合时。

Backbone .fetch（）不使用最新数据更新集合

2 个答案: