更正无效的路由命名

Question

我目前正在开发一个 CRUD 应用程序 - 到目前为止，我已经创建了一个 index 路线、一个 show 路线和 create 路线并且已经移动继续创建 update 方法。我已经继续并添加了路由、模板和控制器，但是每当我尝试单击 link 到我的新模板时，我都会收到一条错误消息，让我知道以下内容：

This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.

我正在通过显示页面link访问更新路径，并且可以确认我正在传递给 link-to 函数的 ID 存在。在这种情况下，我认为我的路线名称可能有问题，但无法弄清楚我哪里出错了。我认为嵌套路由可能有问题。

我已经尝试改变我的路由顺序，并将控制台日志语句放入控制器中，我预计一旦 link-to 语句被命中 - 到目前为止我还没有进入控制器。

app/router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('posts', function() {
    this.route('post');
    this.route('show', { path: '/:post_id' });
    this.route('edit', { path: '/:post_id/edit' });
    this.route('destroy', {path: ':post_id/destroy'});
  });
});

export default Router;

apps/routes/posts/edit.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    console.log('hit this when edit route is hit')
    return this.store.findRecord('post', params.post_id);
  }
});

app/templates/post/show.hbs

<div class="jumbo show-posts">
 ...
</div>
{{log this.model.id}}
  <div class="col-sm-offset-2 col-sm-10">
    <h3>{{#link-to "post.edit" post class=this.model.id}}Update post{{/link-to}}</h3>
  </div>
{{outlet}}
...

Answer 1

您提到了错误的路线名称。根据您的 router.js，它应该是 posts.edit。您应该至少将一个参数传递给 post.edit 路由。

看看我的作品ember-twiddle

既然您提到了 this.route('edit', { path: '/:post_id/edit' })，该路由将要求至少一个参数 :post_id 存在。

修改你{{link-to}}如下，

{{#link-to "posts.edit" this.model.id}}Update post{{/link-to}}

您可以通过 params.post_id、

访问控制器中的 post id

model(params) {
  console.log('hit this when edit route is hit')
  return this.store.findRecord('post', params.post_id);
}

更正无效的路由命名

Correcting Invalid Route Naming

javascript

ember.js

routing

ember-cli