為什么我的路由在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')已被刪除，據我store.find('todo')它在2015年已被刪除，但我對此並不十分確定🤔在這么老的版本之后，您可能還會發現其他大問題教程並使用最新的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 。

然后我添加了您的適配器，這是我需要停止的地方，因為我的本地計算機上沒有運行后端服務器，因此對我而言它將永遠失敗fail

您可以在此處查看用於測試此代碼的代碼： https : //ember-twiddle.com/14bab300c47493c10a9de69efd591092

如果您尚未嘗試使用Ember Twiddle，那么如果您想在Stack Overflow， Ember Discord服務器或Ember論壇上問一個問題，我強烈建議您使用它。 如果您能夠在Ember Twiddle上重新創建問題，那么您很有可能會獲得有用的答復🎉

讓我知道您是否有任何疑問，希望對您有所幫助

Answer 2

我注意到您的routes/todos.js this.store.find('todo');調用this.store.find('todo'); 。 使用store.find(type)已被刪除。 我認為您必須調用this.store.findAll('todo');