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

listenToinVideoViews正在监听这里发生的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 );
        }
      });
    }
  })
}
4

2 回答 2

2

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

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

于 2013-08-09T01:35:28.233 回答
0

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

request — 当模型（或集合）开始向服务器发出请求时

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

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

于 2013-08-09T00:28:47.347 回答