javascript - Ember.js - 界面状态应该存储在哪里？

Question

是否有关于界面状态(相对于持久化模型状态)应该存在于 Ember.js 应用中的什么地方的官方故事？

在 Router docs 的“响应用户发起的事件”部分，有一个将点击事件委托(delegate)给照片的“showPhoto”方法的示例，但是让模型“显示”本身似乎是一种不受欢迎的混合关注。

据我所知，在许多情况下，状态应该存储在路由器中，以便接口(interface)状态在 URL 中表示，并且在您刷新页面或将 URL 发送给某人时恢复。但是非分层状态又如何呢，例如在页面上选择的项目列表？

理想情况下，这种类型的状态将被序列化为查询/哈希参数(例如:http://www.hipmunk.com/flights/QSF-to-NYC#!dates=Sep15,Sep16p1;kind=flight&locations=QSF,YYZ&dates=Sep15,Sep23~tab=1)，但据我所知，路由器不提供该功能，是吗？

在 BackboneConf 上，Jeremy Ashkenas 说在 Backbone 中做到这一点的正确方法是也只将状态存储在模型上(他有一个带有“选定”字段的模型示例)。但我相信 Tom Dale 说过他认为这不是一个好主意，而不是应该如何在 Ember 中完成。不幸的是，我不记得他提到过应该如何完成。

Answer 1

如果您希望状态是可路由的(即可以通过 url 访问)，那么它需要通过 ember 的路由器进行序列化和反序列化。如果状态是暂时的且不可路由，那么最好将其保存在 Controller 上。

如果您需要跨多个模型表示复杂的界面状态(例如，选择列表中的项目)，请考虑维护一个包含底层数据模型的特定于 Controller 的对象数组。我认为直接在模型上表示 View 状态很老套，尤其是当这些模型用于多个 View 时。

对于您提供的示例，您可能会执行类似这样的操作来连接复杂的路由:

Ember.Route.extend({
  route: "flights/:cities/dates/:dates",

  serialize: function(router, context){
    return {cities: context.get('cities'),
            dates:  context.get('dates')};
  },

  deserialize: function(router, params){
    // return a context object that will be passed into connectOutlets()
    return {cities: params.cities,
            dates:  params.dates};
  },

  connectOutlets: function(router, context) {
    // pass the context from deserialize() in as the content of a FlightController
    router.get('applicationController').connectOutlet('flight', context);
  }
})

请注意，您也可以使用诸如“flights?cities=:cities&dates=:dates”之类的路线，但上面的路线可能更简洁且对 SEO 更友好。

---

在 Gabriel 的评论之后进行了扩展:如果您想维护一组搜索，每个搜索都位于其自己的选项卡中，我建议将这些搜索的数据保存在应用程序级别数组(例如 App.currentUser.activeSearches)。我的理由是您不希望每次用户切换选项卡时都必须重新创建此数据。相反，路由器将在 deserialize() 中检索此数据，然后将其作为上下文传递给 connectOutlets()。切换选项卡时，应根据此对象快速重建表示此数据的 View 和 Controller 。让我从上面扩展我的例子:

Ember.Route.extend({
  route: "flights/:cities/dates/:dates",

  serialize: function(router, context){
    return {cities: context.get('cities'),
            dates:  context.get('dates')};
  },

  deserialize: function(router, params){
    // find or create a "Search" object that contains the filters and results,
    // which will be passed into connectOutlets()
    return App.currentUser.findOrCreateSearch({cities: params.cities,
                                               dates:  params.dates});
  },

  connectOutlets: function(router, context) {
    // pass the context (a search object) from deserialize() in as the content of a FlightController
    router.get('applicationController').connectOutlet('flight', context);
  }
})