Question

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

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.

我正在通过显示页面链接到更新路径，并且可以确认要传递给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

您提到的路线名称错误。根据您的posts.edit，它应该是router.js。您应该将至少一个参数传递给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在控制器中访问帖子ID，

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

更正无效的路由命名

1 个答案: