为什么我的路由在Ember Js中不起作用？

Question

我正在使用带有Rails API且前端为Ember的todoApp。 我已遵循本教程Ember todo App 但是，它有点旧，我有点迷路了。

我有一个todos.hbs，应将其渲染为localhost：4200 /，但这是一个清晰的页面。

这是我的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('todos', { path: '/' });
});

export default Router;

还有我的routes/todos.js：

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

export default Route.extend({
  model: function() {
    return this.store.find('todo');
  }
});

在我的application.hbs上只有一个```{{outlet}}

我的todos.hbs看起来像这样：

<section id="todoapp">
  <header id="header">
    <h1>todos</h1>
  {{input type="text" id="new-todo" placeholder="What needs to be done?" value=newTitle action="createTodo"}}
  </header>

  <section id="main">
  <ul id="todo-list">
  {{#each itemController="todo"}}
    <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
    {{#if isEditing}}
      {{input insert-newline=(action "acceptChanges")}}
    {{else}}
        {{input type="checkbox" checked=isCompleted class="toggle"}}
        <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
      <button {{action "removeTodo"}} class="destroy"></button>
    {{/if}}
    </li>
  {{/each}}
  </ul>

    <input type="checkbox" id="toggle-all">
  </section>
</section>

<footer id="info">
  <p>Double-click to edit a todo</p>
</footer>
{{outlet}}

所以现在，我不知道错误在哪里，它只使我空白。如果有人能解释我的工作出了什么问题，我将不胜感激。

更新

我发现我的application.js出现了麻烦，如果可以的话，现在是这样：

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://localhost:3000/api'
});

Answer 1

正如乔已经提到的，store.find('todo')已被删除，从我所见，它在2015年已被删除，但是我不确定100％相信您可能会在这样的旧教程之后发现其他大问题并使用最新的Ember。您是否在Ember Guides网站上看过官方教程？ https://guides.emberjs.com/release/tutorial/ember-cli/总是有很多人确保它是最新的！

我将继续尝试回答您的问题，但是我确实强烈建议您同时尝试一个更现代的教程

Joe确实是正确的，您需要在路由中更新呼叫以使用更新的方法this.store.findAll('todo')，并且如果您提出了建议，那么您应该能够在控制台输出中看到推荐的呼叫（通常可以-单击页面上的任意位置，然后选择“检查元素”，然后单击控制台选项卡）

您可以看到错误提示：

  

已删除使用store.find（type）。使用store.findAll（modelName）检索给定类型的所有记录。错误：断言失败：使用store.find（type）已被删除。使用store.findAll（modelName）检索给定类型的所有记录。

一旦我更新了该方法，我们就使用findAll()，它给了我一个新的错误：

  

处理路线时出错：todos未找到“ todo”的模型错误：未找到“ todo”的模型

这意味着我需要创建文件models/todo.js。如果您确实看过更现代的教程，则可能会建议您使用生成器来生成此文件，例如：ember generate model todo。

然后我添加了您的适配器，这是我需要停止的地方，因为我没有在本地计算机上运行后端服务器，因此对我而言它将永远失败

您可以在此处查看用于测试此代码的代码：https://ember-twiddle.com/14bab300c47493c10a9de69efd591092

如果您要在堆栈溢出，Ember Discord server或{{3 }}。如果您能够在Ember Twiddle上重新创建问题，那么您很有可能会获得有用的答复

让我知道您是否有任何疑问，希望对您有所帮助

Answer 2

我注意到您的routes/todos.js打电话给this.store.find('todo');。使用store.find(type)已被删除。我认为您必须致电this.store.findAll('todo');