我正在尝试在我的第一个“真实”应用程序中使用 backbone.js，我需要一些帮助来调试为什么某些模型更改事件没有像我预期的那样触发。

如果我从服务器的 JSON array 创建一个集合，然后以设定的时间间隔 fetch() 它，如果集合中的单个模型发生更改，我不会收到通知。主干文件建议应该生成这样的通知。我似乎得到的只是每次获取时的刷新通知，这没有用。 OTOH，如果我从服务器的 JSON 对象 创建模型，然后以设定的时间间隔获取()模型，当属性更改时我会收到更改通知。有什么想法吗？

详情

我在/employees/{username}/tasks 的 Web 服务返回任务对象的 JSON 数组，每个任务对象嵌套子任务对象的 JSON 数组。例如，

[{
  "id":45002,
  "name":"Open Dining Room",
  "subtasks":[
    {"id":1,"status":"YELLOW","name":"Clean all tables"},
    {"id":2,"status":"RED","name":"Clean main floor"},
    {"id":3,"status":"RED","name":"Stock condiments"},
    {"id":4,"status":"YELLOW","name":"Check / replenish trays"}
  ]
},{
  "id":47003,
  "name":"Open Registers",
  "subtasks":[
    {"id":1,"status":"YELLOW","name":"Turn on all terminals"},
    {"id":2,"status":"YELLOW","name":"Balance out cash trays"},
    {"id":3,"status":"YELLOW","name":"Check in promo codes"},
    {"id":4,"status":"YELLOW","name":"Check register promo placards"}
  ]
}]

另一个 Web 服务允许我更改特定任务中特定子任务的状态，看起来像这样:/tasks/45002/subtasks/1/status/red [旁白 - 我打算将其更改为 HTTP Post基于服务，但当前的实现更易于调试]

我的 JS 应用程序中有以下类:

子任务模型和子任务集合

var Subtask = Backbone.Model.extend({});

var SubtaskCollection = Backbone.Collection.extend({
  model: Subtask
});

具有子任务集合的嵌套实例的任务模型

var Task = Backbone.Model.extend({
  initialize: function() {

    // each Task has a reference to a collection of Subtasks
    this.subtasks = new SubtaskCollection(this.get("subtasks"));

    // status of each Task is based on the status of its Subtasks
    this.update_status();

  },
  ...
});

var TaskCollection = Backbone.Collection.extend({
  model: Task 
});

任务 View 渲染项目并监听模型的变化事件

var TaskView = Backbone.View.extend({

  tagName:  "li",

  template: $("#TaskTemplate").template(),

  initialize: function() {
    _.bindAll(this, "on_change", "render");
    this.model.bind("change", this.on_change);
  },

  ...

  on_change: function(e) {
    alert("task model changed!");
  }

});

当应用程序启动时，我实例化一个 TaskCollection(使用来自上面列出的第一个 Web 服务的数据)，将更改事件的监听器绑定(bind)到 TaskCollection，并设置一个循环 setTimeout 以 fetch() TaskCollection 实例。

...

TASKS = new TaskCollection();

TASKS.url = ".../employees/" + username + "/tasks"

TASKS.fetch({
  success: function() {
    APP.renderViews();
  }
});


TASKS.bind("change", function() {
  alert("collection changed!");
  APP.renderViews();
});


// Poll every 5 seconds to keep the models up-to-date.
setInterval(function() {
  TASKS.fetch();  
}, 5000);

...

一切都在第一时间按预期呈现。但在这一点上，如果我使用我的第二个 Web 服务更改子任务的状态，我希望触发一个(或两个)集合更改事件或模型更改事件，但这并没有发生。

有趣的是，如果我添加一个附加嵌套级别，我确实会触发更改事件，网络服务返回单个模型，例如:

"employee":"pkaushik", "tasks":[{"id":45002,"subtasks":[{"id":1.....

但这看起来很麻烦……恐怕我没有正确构建我的应用程序。如果有帮助，我将包含更多代码，但这个问题已经相当冗长了。

想法？

最佳答案

你正在监听你的任务事件，而不是你的子任务。如果你希望你的任务也为你的子任务携带事件，你应该在你的 Task.initialize 中做这样的事情:

var self = this;    
this.subtasks.bind("refresh", function(){ self.trigger("refresh:subtask")});
this.subtasks.each(function(st){ 
  st.bind("change", function(){ self.trigger("change:subtask:" + st.id, st) });
});

您可能还想在刷新事件后刷新绑定(bind)。这样，当子任务模型发生变化事件时，任务模型也会触发变化模型。

Backbone 只会在获取后发送刷新事件，您不会被告知特定模型的更改。看collection的fetch函数:

options.success = function(resp) {
  collection[options.add ? 'add' : 'refresh'](collection.parse(resp), options);
  if (success) success(collection, resp);
};

默认会调用刷新。这是刷新函数:

refresh : function(models, options) {
  models  || (models = []);
  options || (options = {});
  this.each(this._removeReference);
  this._reset();
  this.add(models, {silent: true});
  if (!options.silent) this.trigger('refresh', this, options);
  return this;
}

它会静默地(没有事件)将所有模型添加到集合中，然后触发刷新事件，但不会识别更改的元素。

关于javascript - 嵌套集合中的模型更改事件未按预期触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4576150/