ember.js - Ember 2.0 中存储 transient UI 状态的位置

Question

Ember 2.0 竭尽全力让一切都成为组件。随着可路由组件的推出， Controller 也可能会被淘汰。

上下文

但是，在构建用户界面时，我经常遇到一个问题，到目前为止我还没有令人满意的模式:用户界面状态。

我在做什么？

• 选择状态
• 当前焦点
• 某些树显示中的折叠/展开状态

基本上，任何不属于实际数据的状态，都必须逐个对象地进行跟踪。过去，这通常是通过 Controller 来完成的，充当模型的代理。这种方法现在已经过时了。新方法是组件无处不在，为了更好。组件进行簿记、跟踪 transient 状态并返回操作。

不过，我的典型模式是共享状态，例如具有可选项目的列表。

问题

构建一个列表组件，满足以下要求:

• 每个项目都可以选择。
• 选择状态会更改 DOM(某些类绑定(bind))。
• 用户可以在列表组件中绘制一个矩形来一次选择多个项目。
• 理想情况下，整个行为可以抽象为 mixin。

问题:选择标志位于哪里？

尝试

1)一切都是组件。

我将每个项目设为子组件，例如 {{my-list-item}}。该组件跟踪选择状态。问题:列表组件如何更新选择状态？

2) 将状态移出子组件。

将其放在列表组件上。在项目列表旁边的单独状态数组中。优点:该列表具有所需的所有状态。缺点:在列表中添加或删除项目时保持同步是一场噩梦。这意味着子组件无法访问状态。或者也许我可以将它作为绑定(bind)值传递给他们？

3) 重新引入代理。

想想看，有一种方法可以共享某些状态:将其放在模型上。好吧，不是在实际模型上，以免本地状态污染它们，而是通过设置一个 ArrayProxy，为每个项目返回一些 ObjectProxy 来保存状态。

优点:这是我能够完全实现的唯一解决方案。缺点:项目的封装和解封装很麻烦。另外，经过几层传递后，get 和 set 必须经过 4 ou 5 代理，我担心这会影响性能。

此外，它对于 mixins 也效果不佳。如果我想抽象出一些 HasSelection mixin、一个 HasFoldableItems mixin 和一个 Sortable mixin，它们都需要一些状态。

回到绘图板

还有我没有找到的更好的模式吗？

我发现了以下相关问题，但没有结果:

• Ember.js - where should interface state be stored? (2012 年，建议与我上面的#3 类似的内容)
• Road to Ember 2.0 - High level Ember app structure feedback? (列表中的一些关键问题与此相关)

Answer 1

很好的问题 - 我实际上去找了一位核心 Ember 团队成员来找出答案，目前的答案是服务。由于组件最好保持无状态(在大多数情况下)，因此您可以利用服务来持久保存这种不适合服务器持久模型的状态。

这是 Stef Penner 整理的一个很好的示例，展示了如何在 ember 应用程序(不是持久后端)中保存“电子邮件草稿”

https://github.com/stefanpenner/ember-state-services

供引用的示例组件(来自上面的 github 项目)

export default Ember.Component.extend({
  tagName: 'form',
  editEmailService: Ember.inject.service('email-edit'),
  state: Ember.computed('email', function() {
    return this.editEmailService.stateFor(this.get('email'));
  }).readOnly(),

  actions: {
    save() {
      this.get('state').applyChanges();
      this.sendAction('on-save', this.get('email'));
    },

    cancel() {
      this.get('state').discardChanges();
      this.sendAction('on-cancel', this.get('email'));
    }
  }
});