Backbone.View.model.on('change:...') 仅触发一次答案

【问题标题】：Backbone.View.model.on('change:...') trigged only onceBackbone.View.model.on('change:...') 仅触发一次
【发布时间】：2014-01-28 17:49:08
【问题描述】：

我正在通过模态窗口为帖子上传 ajax 文件，并在帖子中进行预览。每个帖子都有自己的模型和视图。模态窗口也是一个单独的视图，绑定到现有的 DOM 元素。

当点击帖子视图中的Attach 按钮时，我从模态视图调用 .open()，将帖子模型作为设置传递给模态视图：

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

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

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

为了触发图像渲染，我绑定了一个监听器来跟踪 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() 在 Post 视图中仅触发一次，第一次上传。未捕获其他更改（当 postModel.get('images_uploaded').length 变为 2,3 等时）。我做错了什么？

谢谢。

【问题讨论】：

如果我没记错的话，这是因为指针没有改变。可以在这里使用集合吗？然后，您可以利用 add 事件。

标签： javascript jquery ajax backbone.js model-view-controller

【解决方案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 方法时并没有改变模型属性，它总是指向同一个对象（数组），你只需改变数组值。

Here's an example

【讨论】：