Backbone.js 如何处理主干网中的状态更改

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

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

现在我有一个

公司

集合、

部门

集合和一个

用户

集合，它们保存着各自的模型

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

选择1

CompanyView触发一个

userSet:company

事件，同时发送公司id

companys

听到

userSet:company

并用事件的id更新其

所选的
属性
部门


听到
userSet:company
，并根据事件中的公司id更新其
url
属性
基于此新url获取
成功后，通过触发
changed:departments
事件通知
DepartmentView
它已更改

用户


听到
userSet:company
，并根据公司id更新其url属性
基于此新url获取
成功后，通过触发
changed:users
事件通知
UserView
它已更改

如果我使用此选项，则
部门
和
用户
都将有一个类似于

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：

公司视图更新
公司
集合的
所选
属性。然后触发一个
userSet:company
事件
然后，
部门
和
用户
集合可以查看
公司
集合以获取其URL：

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

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

我在这里看到的问题是，现在我的收藏必须相互了解。由于这只是应用程序的一个小技巧，我知道它会变得越来越难维护，特别是当我必须处理异步时。回调（即，如果他们开始监听对方的
changed:department
事件，事情就会变得太复杂）

选择3
我可以查看路由，在每个UI更改上更新路由，然后从那里更新我的模型。在我的模型中加入状态似乎会在将来给我带来更多的灵活性，但我对主干/客户端MVC是全新的，所以我可能在这方面错了

你们觉得怎么样？
这里有示意图工作流。希望这对你有帮助

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]');  

HTML：
初始化：
新视图（{部门：新部门（），用户：新用户（）}）；
收藏：
setId（id）：
this.url=http://location/“+id+”/resource”；
归还这个；
视图：
初始化：
this.listenTo（this.options.departments，'sync'，this.renderDepartments）；
this.listenTo（this.options.users，'sync'，this.renderUsers）；
活动：
“更改[数据公司]”：“公司更改处理程序”
“更改[数据部门]”：“部门更改处理程序”
公司变更处理人（e）：
此.$（“[数据部门]”）.empty（）；
此.$（“[数据用户]”）.empty（）；
this.options.departments.setId（e.currentTarget.value）.fetch（）；
部门变更处理人（e）：
此.$（“[数据用户]”）.empty（）；
this.options.users.setId（e.currentTarget.value）.fetch（）；
渲染部分：
//将选项附加到此。$（“[数据部门]”）；
渲染器：
//将选项附加到此。$（“[data user]”）；