如何处理Backbone中的状态更改

Question

我正在建立公司/部门/用户选择器。

当用户选择公司时，应用程序需要获取该公司的部门和用户，并更新选择列表。

现在我有一个companies集合，departments集合和一个users集合，它们拥有各自的模型。

当用户选择公司时，更新我的应用的最佳方式是什么？

选项1

1. CompanyView会触发userSet:company事件，并发送公司的ID。
2. companies听到userSet:company并使用活动中的ID更新其selected媒体资源。

3. departments

   • 听取userSet:company并根据活动中的公司ID更新其url媒体资源
   • 根据此新网址提取
   • 成功后，通过触发DepartmentView事件
   通知changed:departments它已更改

4. users

   • 听取userSet:company并根据公司ID
   更新其网址
   • 根据此新网址提取
   • 成功后，通过触发UserView事件
   通知changed:users它已更改

如果我选择此选项，则departments和users都会有一个类似于

的自定义提取事件

fetchAndTrigger: function(event) {
    this.url = 'http://'+document.location.host+'/data/companies/'+event.get('id')+'/departments';
    this.fetch({
        success: function() {
            events.trigger("changed:departments");
        }
    });
}

这对我来说似乎有问题，因为即使我的观点可以直接从模型/集合生成，集合也不知道如何fetch除非他们有事件（即他们没有完全保存）申请的状态）。

选项2

这里的主要区别在于步骤1：

1. CompanyView更新selected集合的companies属性。然后它会触发userSet:company事件。

然后，departments和users集合可以查看companies集合以获取其网址：

// departments collection
url: function() {
    return 'http://'+document.location.host+'/data/companies/'+this.companies.selected.id+'/departments';
}

现在我可以直接调用fetch，只需担心成功处理程序。

我在这里看到的问题是，现在我的收藏品必须彼此了解。由于这只是应用程序的一小部分，我知道它将变得更难维护，特别是因为我必须处理异步。回调（即如果他们开始倾听彼此的changed:department事件，事情会变得太复杂。）

选项3

我可以查看路线，并在每个UI更改更新路线，然后从那里更新我的模型。似乎我的模型中的状态将在未来给我更大的灵活性，但我对Backbone /客户端MVC来说是全新的，所以我可能错了。

你们有什么想法？

Answer 1

有原理图工作流程。希望这会对你有所帮助。

HTML:
     <select data-company></select>
     <select data-department></select>
     <select data-user></select>

Initialization :
     new View({departments:new Departments(), users:new Users()});

Collections :
     setId (id) :
          this.url = 'http://location/' + id + '/resource';
          return this;

View :
     initialize :
          this.listenTo(this.options.departments, 'sync', this.renderDepartments);
          this.listenTo(this.options.users, 'sync', this.renderUsers);

     events :
          'change [data-company]' : 'companyChangeHandler'
          'change [data-department]' : 'departmentChangeHandler'

     companyChangeHandler (e) :
          this.$('[data-department]').empty();
          this.$('[data-user]').empty();
          this.options.departments.setId(e.currentTarget.value).fetch();

     departmentChangeHandler (e) :
          this.$('[data-user]').empty(); 
          this.options.users.setId(e.currentTarget.value).fetch();

     renderDepartments :
          // append options to this.$('[data-department]');  

     renderUsers :
          // append options to this.$('[data-user]');