ember.js - Ember.js 中除 id 之外的动态段

Question

我正在尝试研究动态段，并且希望能够使用 slug 或其他属性而不是 id。当我能让事情正常运转时，感觉就像是侥幸。 (我使用的是 ember 2.7+)

我一直在查看以下来源/线程来寻找想法: https://guides.emberjs.com/v1.10.0/cookbook/ember_data/linking_to_slugs (1.10) http://discuss.emberjs.com/t/slugs-for-replacing-id-path-for-dynamic-segments

我计划使用 ember-data，但我想确保我能控制 - 所以我不想使用 :post_slug/underscore 样式，它有一些我想避免的内置魔法。

这是一个ember-twiddle这里是step-by-step commits in a github repo

我的思考过程

1. 从概念上讲，假设我需要一个猫列表 - 因此我需要描述“猫”的模型。

models/cat.js

import Model from "ember-data/model";
import attr from "ember-data/attr";

export default Model.extend({
  name: attr('string'),
  slug: attr('string')
});

2. 定义动态段在 url 中的位置。我将使用 catId 来证明一点，而不是像我见过的大多数教程那样使用 cat_id 或 :id 。对于这个例子，我还编写了一个实际的应用程序结构，而不是尽可能小的路由器 - 来测试它的边缘。 + 如果我以后需要这样的东西怎么办:animals.com/cats/:catId/best-friend/:dogId

router.js

Router.map(function() {
  this.route('index', { path: '/' });
  this.route('cats', { path: '/cats' }, function() {
    this.route('index', { path: '/' }); // list of cats
    this.route('cat', { path: '/:catId' }); // cat spotlight
  });
});

3.将catData拉入/cats路由中的store~

routes/cats.js

import Ember from 'ember';

const catData = [
  {
    id: 1,
    name: 'Dolly',
    slug: 'dolly'
  },
  {
    id: 2,
    name: 'kitty cat',
    slug: 'kitty-cat'
  },
  {
    id: 3,
    name: 'Cleopatra',
    slug: 'cleo'
  }
];

export default Ember.Route.extend({
  model() {
    return catData;
    // return this.get('store').findAll('cat'); // with mirage or live api
  }
});

评论更新:

I do not believe that you can use queryRecord with your test data. Ember data plays dumb with query and queryRecord; it doesn't assume anything about your data and just passes the call on to your server.

~@xcskier56

所以这有点让我烦恼。 git 存储库示例是 Mirage。

4. 创建模板... + 设置“cat”路线。记录在商店...对吗？所以我应该能够根据 id 来“偷看”它们。文档使用 params - 但是 -

Ember will extract the value of the dynamic segment from the URL for you - and pass them as a hash to the model hook as the first argument

: ~ 所以 params 对象名称并不特殊，实际上可以是您想要的任何内容...并且只是用哈希值替换 - 所以到那时/我使用 'passedInThing' 只是为了断言控制权令人困惑的约定(许多教程使用 param 而不是 params)

routes/cats/cat.js

model( passedInThing ) {
  return this.store.peekRecord('cat', passedInThing.catId );
} // not going to happen - but in theory...

model( passedInThing ) {
  return this.store.queryRecord('cat', { slug: passedInThing.catId } );
}

5. 此时，我应该能够导航到 url/cats/2 - 并且 2 应通过模型 Hook 传递到查询。 “去找一只 id 为 2 的‘猫’”——对吗？？？ ((twiddle 示例使用了一组硬编码的 catData - 但在我的其他尝试中，我将 Mirage 与固定装置和动态 slugs 结合使用:https://github.com/sheriffderek/dynamic-segments-tests/commits/queryRecord

6. 在段中输入是有效的 - 但对于 link-to 帮助程序，我需要传入显式 cat.id

{{#link-to 'cats.cat' cat.id}}
  <span>{{cat.name}}</span>
{{/link-to}}

7. 我可以让所有这些工作正常 - 但我不想在 URL 中包含 ID。我想要带有“slug”的 cats/cleo ~ 理论上我可以将 catId 切换为 catSlug 和 cat.id 到 cat.slug 等 - 但事实并非如此。我看过很多概述这一点的教程，但它们已经过时了。我尝试过传入 { slug: params.slug } 以及 find 查询和 peek 等的每个组合。有时 url 可以工作，但模型不会渲染 - 或者相反。

8. 这看起来像是 101 件事。谁能向我解释一下吗？噢，聪明的 emberinos - 来帮助我吧!

更新

• A nice video showing how to use serialize() in this case
• 据说 Ember 教程中有一个示例，但我还没有看到它落地。

Answer 1

我一直在努力解决同样的问题，而且我知道没有办法在不查询服务器的情况下处理这个问题。虽然这是旧的并且代码有点过时，但逻辑仍然存在。 http://discuss.emberjs.com/t/use-slug-for-page-routes-id-for-store-find/6443/12

我所做的是使用store.queryRecord()，然后我的服务器能够返回通过 slug 获取的记录。

这就是路线的样子:

model: function (params) {
  return this.store.queryRecord('cat', {slug: params.catSlug})
}

这将使您不会在 URL 中公开 ID，但每次模型被命中时都会向商店发出查询。似乎有一些关于在 ember-data 中缓存 query 和 queryRecord 的讨论，但还没有任何效果。

• https://github.com/emberjs/data/issues/1966

其他有用的资源:

• How to cache query result in ember data
• Cache a record when using Query Params in the call? Ember-data