7

是否有关于接口状态（而不是持久模型状态）应该存在于 Ember.js 应用程序中的官方故事？

在路由器文档的“响应用户发起的事件”部分中，有一个将点击事件委托给照片的“showPhoto”方法的示例，但是让模型“显示”本身似乎是不合需要的关注点混合。

我知道在许多情况下，状态应该存储在路由器中，以便接口状态在 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 中应该如何做。不幸的是，我不记得他提到应该怎么做。

4

1 回答 1

4

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

如果您需要跨多个模型表示复杂的接口状态（例如，用于选择列表中的项目），请考虑维护包装底层数据模型的特定于控制器的对象数组。我认为直接在模型上表示视图状态是不合时宜的，尤其是当这些模型用于多个视图时。

对于您提供的示例，您可能会执行以下操作来连接复杂的路由：

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(). 在切换选项卡时，应基于此对象快速重新构建表示此数据的视图和控制器。让我从上面扩展我的例子：

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);
  }
})
于 2012-09-14T16:56:15.190 回答