backbone.js - 如何处理 Backbone 中的状态变化

Question

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

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

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

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

选项1

1. CompanyView 触发一个userSet:company事件，同时发送公司的 ID。
2. companies使用事件中的 id 听到userSet:company并更新其属性。selected

3. departments

   • 根据事件中的公司 ID听到userSet:company并更新其属性url
   • 根据这个新的 url 获取
   • DepartmentView成功时，通过触发changed:departments事件通知它已更改

4. users

   • 根据公司 ID听到userSet:company并更新其 url 属性
   • 根据这个新的 url 获取
   • UserView成功时，通过触发changed:users事件通知它已更改

如果我选择这个选项，两者departments都会users有一个自定义的 fetch 事件，看起来像

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事件。

然后，departmentsandusers集合可以查看companies集合以获取它们的 url：

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