非 id/永久链接 具有 Ember 数据和固定装置的动态路由



所以我正在尝试让我的路由工作,以便我的 url 中有永久链接用于共享。 即"/入门"。

我似乎无法弄清楚模型/序列化是如何工作的,那么 ember-data 如何知道如何用字符串找到我的对象呢?我已经尝试了查询夹具,它返回了正确的模型,但没有设置

这是我的代码:

路由器:

App.Router.map (match) -> 
  @resource 'topics', {path: "/support"}, ->
    @route 'topic', {path: '/:permalink'}
# Support Routes
App.TopicsRoute = Ember.Route.extend
  model: ->
    this.store.find('topic')
App.TopicsTopicRoute = Ember.Route.extend
  # serialize: (model, params) ->
  #   return { topic_id: model.get(params.topic_id) }
  model: (param) ->
    @get('store').findQuery App.Topic, {permalink: param.permalink}
  setupController: (controller, model) ->
    controller.set("content", model)
  actions:
     error: (error) ->
      console.log error

App.ApplicationAdapter = DS.FixtureAdapter.extend
  queryFixtures: (fixtures, query, type) ->
    fixtures.filter (item) ->
      for property, value of query
        if item[property] == value
          return item
        else
          false

还有我的灯具:

App.Topic = DS.Model.extend
  name: DS.attr('string')
  permalink: DS.attr('string')
  position: DS.attr('number')

# Fiture data
App.Topic.FIXTURES = [
  {
    id: 1
    name: "Getting Started"
    permalink: "getting-started"
    position: 1
    articles: [
      { name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
      { name: "test 2", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
      { name: "test 3", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
    ]
  },
  {
    id: 2
    name: "Frequently Asked Questions"
    permalink: "frequently-asked-questions"
    position: 2
    articles: [
      { name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." },
      { name: "test 2", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
    ]
  },
  {
    id: 3
    name: "Tips & Tricks"
    permalink: "tips-tricks"
    position: 3
    articles: [
      { name: "test 1", content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et." }
    ]
  }
]

对于这个答案,我假设你使用的是 Ember 的 1.0.0 版和 Ember Data 的 Beta 版 1.0.0。

对于您描述的路由器,您应该设置以下路由对象:

App.TopicsIndexRoute = Ember.Route.extend

App.TopicIndexRoute = Ember.Route.extend

否则,Ember 在将正确的模型传递到路由时会遇到问题。

现在,在 TopicIndexRoute(代码中的 TopicsTopicRoute)中,您使用模型钩子,仅在输入 URL 或重新加载页面时调用该钩子,而不是在通过 {{link-to}} 帮助程序 (http://emberjs.com/api/classes/Ember.Route.html#method_model) 进入路由时调用。

当您从 {{link-to}} 帮助程序转到 TopicIndexRoute 时,"余烬魔法"仅当动态段 (http://emberjs.com/guides/routing/specifying-a-routes-model/#toc_dynamic-models) 是模型的 ID 时才将它与相应的模型匹配。我还不知道如何解决这个问题。这可能会有所帮助:将非 ID 动态参数与 ember 路由器 v2 一起使用

我不知道您使用的夹具是否正常工作,但在设置关系时,您应该使用(至少指南中是这样显示的:http://emberjs.com/guides/models/connecting-to-an-http-server/#toc_json-conventions)模型 ID 而不是声明实例。它看起来像这样:

App.Article.FIXTURES = [
{
 id: 1,
 name: "test 1",
 content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
},
{
 id: 2,
 name: "test 2",
 content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
},
{
 id: 3,
 name: "test 3",
 content: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
}
]
App.Topic.FIXTURES = [
{
 id: 1
 name: "Getting Started"
 permalink: "getting-started"
 position: 1
 articles: [1,2,3]
}
]

我希望这对你有所帮助。

最新更新