Ember JS 和嵌套路由：提供的路由名称无效

Question

我目前正在使用 Balint Erdi 的优秀书籍 "Rock and Roll with Ember JS"

完成我的第一个 Ember JS 应用程序

我很困惑，希望得到一些帮助。

我的应用有以下（相当简单的）路由：

/clients  
/clients/:slug  
/clients/:slug/requests

例如，我希望用户能够通过访问 /clients/abc-company/requests

查看特定客户端的请求

在主仪表板上，在 clients.hbs 内，我有以下代码 link 每个特定客户端（使用动态细分）：

  {{#each model as |item|}}
  <tr>
    <td>{{item.id}}</td>
    <td>{{#link-to "clients.client.requests" client}}
      {{item.name}}
    {{/link-to}}</td>
    <td>{{item.contact}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
  </tr>
  {{/each}}

现在，问题是 Ember 似乎无法识别第二个 link-to 参数 (client)。

控制台向我大喊大叫，并显示以下错误消息：

WARNING: 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.

但我确实传递了参数，应该是 client!

这是我代码中的相关文件，我希望有人能指出我明显的错误或找到我忘记包含的分号，或其他东西。

//app/router.js
(...)
Router.map(function() {
  this.route('clients', function() {
    this.route('client', { path: ':slug' }, function() {
      this.route('requests');
    });
  });
});

//app/routes/clients.js
(...)
var Client = EmberObject.extend({
  id: '',
  name: '',
  contact: '',
  email: '',
  phone: '',
// create slug from client name
  slug: computed('name', function() {
    return this.get('name').dasherize();
  })
});

// app/routes/clients/client.js <-- see the route DOES exist
(...)
  model: function(params) {
    // get the slug from clients, return client matching the slug name in the URL
    var clients = this.modelFor('clients');
    return clients.findBy('slug', params.slug);
  }
});

// app/routes/clients/client/requests.js
(...)
  model: function() {
    return this.modelFor('clients.client');
  }
});

任何帮助将不胜感激，这是我的第一个 Ember.js 障碍，我觉得正确理解嵌套路由在未来将非常有用:)

但现在我只是一头雾水。

提前致谢！

编辑：为清晰起见，从模板中添加了更多代码。

Answer 1

我想通了。

第 1 课：当 Ember 抱怨您想要的模型无效并且您认为您创建了路由，请确保您确实在顶部导入了路由路由文件 (import Route from '@ember/routing/route';)

我的因为某些原因不见了，我没看到

第 2 课：在模板文件中，#link-to 需要的参数实际上并不是 route/model 的名称。这是您在每个循环中选择调用迭代的名称。

这是错误的：

{{#each model as |item|}}
<tr>
<td>{{item.id}}</td>
<td>{{#link-to "clients.client.requests" client}}
{{/each}}

这是正确的：

{{#each model as |client|}}
<tr>
<td>{{client.id}}</td>
<td>{{#link-to "clients.client.requests" client}}

我不知道这些信息是否会对任何人有所帮助。无论如何，我将继续自我击掌。

编辑：看来我必须等待 2 天才能接受我自己的答案。

干杯！

Ember JS 和嵌套路由：提供的路由名称无效

Ember JS and nested routes: the provided route name is invalid

ember.js