Ember Getting Started

Question

I'm playing the Ember doing the Getting Started tutorial: http://emberjs.com/guides/getting-started/displaying-model-data/ but I got stuck, I don't know what I'm doing wrong. Everything was fine until I got to Displaying Model Data, you only has to add:

Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return Todos.Todo.find();
  }
});

to return all existing todos and replace the static html with handlebars to make it dynamic:

<ul id="todo-list">
  {{#each controller}}
    <li>
      <input type="checkbox" class="toggle">
      <label>{{title}}</label><button class="destroy"></button>
    </li>
  {{/each}}
</ul>

And this is the result: enter image description here

As I said, it worked fine before until this point. Code right here.

the ember file you're referencing in the fiddle isn't reachable. the fiddle fails with errors for me as a result. — Ben McCormick
@ben336 I the tutorial I have: js/app.js js/application.js js/router.js models/store.js models/todo.js Should I put it all together in the javascript? Anyways, I think the point really is why is not working locally? — Labanino
I don't know why its not working locally, just pointing out that including a fiddle is unhelpful if it does not contain a working reference to the library you're using :) — Ben McCormick
honest question, is your handlebars template inside of a script tag? — MilkyWayJoe
@MilkyWayJoe No, I didn't! Now it is working fine locally :) BUT in jsbin is showing nothing. I'm using the same html the only that is different are the js references. I have jquery, handlebars, ember and ember-data. Also, I put all the js together. I have no idea what am I doing wrong? Thank you. jsbin.com/atinup/3/edit — Labanino

MilkyWayJoe MilkyWayJoe · Accepted Answer · 2013-06-06T21:55:01

I've changed your app a little. Before you had two instances of Ember.Application called App and Todo operating in the same scope. By default, an Ember App uses the body element as the rootElement (where your app is going to render), so your apps were colliding.

If you really need two apps running on the same page, use Application#rootElement to inform the selector of the element you want the apps to render. I would say you should avoid using the body as rootElement when you have multiple applications sharing the same document (if that's what you wanted).

As per your image, I don't think you need two apps, and I'm assuming you just want the To Do app, so I have removed App, leaving only Todo (see fixed jsbin).

I have noticed that all your HTML was static and you were not using Handlebars at all, as well as some incorrect js references which have been fixed.

Instead of doing the following:

  <section id="main">
    <ul id="todo-list">
      <li class="completed">
        <input type="checkbox" class="toggle">
        <label>Learn Ember.js</label><button class="destroy"></button>
      </li>
      <li>
        <input type="checkbox" class="toggle">
        <label>...</label><button class="destroy"></button>
      </li>
      <li>
        <input type="checkbox" class="toggle">
        <label>Profit!</label><button class="destroy"></button>
      </li>
    </ul>
  <!-- more stuff-->

Use Handlebars, as it provides the {{each}} helper, which allows you do iterate through your collection like this:

    <ul id="todo-list">
    {{#each filteredTodos itemController="todo"}}
      <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
        {{#if isEditing}}
          {{view Todos.EditTodoView todoBinding="this"}}
        {{else}}
          {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
            <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
            <button {{action "removeTodo"}} class="destroy"></button>
        {{/if}}
      </li>
    {{/each}}
    </ul>

This will create a li element for each model in your controller (in this case, from the computed filteredTodos).

I strongly recommend you to dive into the guides to learn more about ember.

Ember Getting Started

1 Answers