Backbone.View.model.on('change：...') 只跳闸一次

Question

我正在通过Modal窗口上传AJAX文件，并在Preview中使用Preview。每个帖子都有自己的模型和视图。模态窗口也是一个单独的视图，伴随着现有的DOM元素。

当单击"帖子"视图中的 Attach按钮时，我会从模态视图中调用.open（），将邮政模型传递到模态视图作为设置：

POST VIEW:
======================
ModalAttach.open({
  postModel : this.model
});

当模态视图中的文件上传时，我将服务器响应添加到传递的Post Model中，以稍后将其呈现为预览：

MODAL VIEW:
======================
// file upload success
success: function(data) {
  // if it's first call, set []
  var imagesUploaded = self.postModel.get('images_uploaded') || [];
  // add server response to array
  imagesUploaded.push(data);
  // rewrite current model array to new array
  self.postModel.set({ 'images_uploaded' : imagesUploaded });
}

要在Post中进行预览（在实际提交之前），我有一个函数

POST VIEW:
======================
renderUploadedImages: function () {
  var self = this;
  this.$uploadedImagesWrapper = this.$('.b-uploaded__images');
  if (this.model.get('images_uploaded')) {
    this.$uploadedImagesWrapper.empty();
    this.model.get('images_uploaded').forEach(function (uploadedImage) {
      self.$uploadedImagesWrapper.append(
        uploadedImageTemplate({
          'source': uploadedImage.source
        })
      )
    });
  }
}

和触发图像渲染，我绑定了一个Listner以跟踪Model.images_uploaded时通过模态视图更改：

POST VIEW:
======================
initialize: function () {
  this.addEvents();
  this.renderUploadedImages();
},
addEvents: function () {
  var self = this;
  this.model.on('change:images_uploaded', function () {
    self.renderUploadedImages();
  })
},

首先上传时，问题是renderUploadedImages()仅一次触发一次。没有捕获其他更改（当postmodel.get（'images_uploaded'）。长度变为2,3等）。我做错了什么？

谢谢。

Answer 1

当您喜欢这样做时：

var imagesUploaded = self.postModel.get('images_uploaded') || [];
// add server response to array
imagesUploaded.push(data);
// rewrite current model array to new array
self.postModel.set({ 'images_uploaded' : imagesUploaded });

第一次，如果您检查self.postModel.get('images_uploaded')，您会发现它undefined，这就是为什么触发事件change:images_uploaded时。

但是第二次调用success方法时，您不会更改模型属性，它总是指向同一对象（数组），您只需更改数组值。

这是一个示例