javascript - 为什么我的路由在 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

正如 Joe 已经提到的，store.find('todo') 已被删除，据我所知，它已于 2015 年被删除，但我不是 100% 确定 🤔 你是按照这样的旧教程并使用最新的 Ember，可能会发现其他大问题。您看过 Ember Guides 网站上的官方教程吗？ https://guides.emberjs.com/release/tutorial/ember-cli/总是有很多人确保它尽可能是最新的!

我会继续尝试回答您的问题，但我强烈建议您同时尝试稍微更现代的教程😂

Joe 确实是正确的，您需要更新路由中的调用以使用更新的方法 this.store.findAll('todo') 并且您应该能够在您的调出控制台输出(通常可以右键单击页面上的任意位置并选择“检查元素”，然后单击控制台选项卡)

如您所见，错误显示:

Using store.find(type) has been removed. Use store.findAll(modelName) to retrieve all records for a given type. Error: Assertion Failed: Using store.find(type) has been removed. Use store.findAll(modelName) to retrieve all records for a given type.

一旦我更新了该方法以便我们使用 findAll() 它给了我一个新的错误:

Error while processing route: todos No model was found for 'todo' Error: No model was found for 'todo'

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

然后我添加了你的适配器，这是我需要停止的地方，因为我没有在我的本地机器上运行后端服务器，所以它总是会失败 😄

你可以在这里看到我用来测试这个的代码:https://ember-twiddle.com/14bab300c47493c10a9de69efd591092

如果您以前没有使用过 Ember Twiddle，如果您想在 Stack Overflow 上的 Ember Discord server 上提问，我会强烈推荐它或在 Ember forums 上.如果您能够在 Ember Twiddle 上重现您的问题，那么您很可能会得到有用的回复 🎉

如果您有任何问题，请告诉我，我希望这对您有所帮助 👍