Javascript 更正无效的路由命名

我目前正在开发一个

CRUD

应用程序-到目前为止，我已经创建了一个

索引

路由、

显示

路由和

创建

路由，并且已经开始创建一个

更新

方法。我已经添加了路线、模板和控制器，但每当我尝试单击指向新模板的链接时，我都会收到一个错误，告知我以下内容：

此指向的链接处于非活动加载状态，因为当前至少有一个参数具有空/未定义的值，或者提供的路由名称无效。

我正在通过显示页面链接到更新路径，并且可以确认传递到

链接到
功能的
ID
是否存在。在这种情况下，我认为我的路线名称可能有问题，但无法找出我的错误所在。我认为嵌套路由可能有问题

我已经尝试改变我的路由顺序，并将控制台日志语句放在我预期在命中链接到语句时命中的控制器中-到目前为止，我还没有进入控制器

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;


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);
  }
});

apps/routes/posts/edit.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;


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}}
...


...
{{log this.model.id}
{{{#链接到“post.edit”post class=this.model.id}}更新post{{/link to}
{{outlet}}
...
您提到了错误的路线名称。应该是
posts。根据您的
router.js
编辑
。您应该至少将一个参数传递给
post.edit
路由

看看我的作品

由于您已提到此.route（'edit'，{path:'/:post\u id/edit'}）
，因此该路由至少需要一个参数
：post\u id

修改您的
{{link to}}
如下：

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

您可以通过
参数访问控制器中的post id。post_id

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