Why does my routing not work in Ember Js?

Question

I'm working on a todoApp with a rails API and frontend as Ember. I've followed this tutorial Ember todo App However, it a bit old and I kinda lost in my routing.

I've a todos.hbs which should be rendered localhost:4200/, but it is a clear page.

Here's what my router.js looks like :

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;

And my routes/todos.js :

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

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

On my application.hbs , there's only an ```{{outlet}}

and my todos.hbs looks like this :

<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}}

So now, I dont know where the mistake is, it only rendered me a blank page. If anyone can explain what is wrong into my work, I would appreciate.

UPDATE

I've found that a troubles appear in my application.js , here's what it looks like now, if that can help :

import DS from 'ember-data';

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

Answer 1

As Joe has already mentioned, store.find('todo') has been removed and from what I can see it was removed in 2015 but I am not 100% sure about that 🤔 You are likely to find other large issues following such an old tutorial and using the latest Ember. Have you seen the official tutorial on the Ember Guides site? https://guides.emberjs.com/release/tutorial/ember-cli/ there is always a lot of people making sure that it is as up-to-date as possible!

I will continue to try to answer your question but I do strongly recommend that you try a slightly more modern tutorial in the meantime 😂

Joe is indeed correct that you need to update the call in your route to use the updated method this.store.findAll('todo') and you should be able to see that recommended in your console output if you bring it up (you can usually right-click anywhere on the page and select 'Inspect Element' and then click the console tab)

As you can see the error says:

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.

Once I update that method so we're using findAll() it gives me a new error:

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

Which means I need to create the file models/todo.js . If you do look at a more modern tutorial it will probably recommend that you use a generator to generate this file such as: ember generate model todo .

I then added your adapter and this is where I need to stop because I don't have the backend server running on my local machine so it will always fail for me 😄

You can see the code I was using to test this here: https://ember-twiddle.com/14bab300c47493c10a9de69efd591092

If you haven't used Ember Twiddle before I would highly recommend it if you are trying to ask a question here on Stack Overflow, on the Ember Discord server or on the Ember forums . If you are able to recreate your issue on an Ember Twiddle then you are very likely to be able to get a helpful response 🎉

Let me know if you have any questions and I hope this has been helpful 👍

Answer 2

I noticed that your routes/todos.js calls this.store.find('todo'); . Using store.find(type) has been removed. I think you have to call this.store.findAll('todo');