javascript - 更正无效的路由命名

Question

我目前正在开发一个 CRUD 应用程序 - 到目前为止，我已经创建了一个 index 路由、一个 show 路由和 create 路由并继续创建 update 方法。我已经继续并添加了路由、模板和 Controller ，但是每当我尝试单击指向我的新模板的链接时，我都会收到一条错误消息，告知我以下信息:

此链接处于非事件加载状态，因为它的至少一个参数当前具有 null/undefined 值，或者提供的路由名称无效。

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

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

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 访问您的 Controller 中的post id，

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