Ember Getting Started Displaying Model Data error

Ember Getting Started Displaying Model Data error

by Neal

HTML

<script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="todos">
    < section id = "todoapp" > < header id = "header" > < h1 > todos < /h1>
      <input type="text" id="new-todo" placeholder="What needs to be done?" / > < /header>

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

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

      <footer id="footer">
        <span id="todo-count">
          <strong>2</strong > todos left < /span>
        <ul id="filters">
          <li>
            <a href="all" class="selected">All</a > < /li>
          <li>
            <a href="active">Active</a > < /li>
          <li>
            <a href="completed">Completed</a > < /li>
        </ul >

            < button id = "clear-completed" > Clear completed(1) < /button>
      </footer > < /section>

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

CSS

/* CSS from http://todomvc.com/ */
 html, body {
    margin: 0;
    padding: 0;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    /*-moz-appearance: none;*/
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
body {
    font: 14px'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #eaeaea url('http://todomvc.com/architecture-examples/emberjs/bower_components/todomvc-common/bg.png');
    color: #4d4d4d;
    width: 550px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
#todoapp {
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    margin: 130px 0 40px 0;
    border: 1px solid #ccc;
    position: relative;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
    content:'';
    border-left: 1px solid #f5d6d6;
    border-right: 1px solid #f5d6d6;
    width: 2px;
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
}
#todoapp input::-webkit-input-placeholder {
    font-style: italic;
}
#todoapp input:-moz-placeholder {
    font-style: italic;
    color: #a9a9a9;
}
#todoapp h1 {
    position: absolute;
    top: -120px;
    width: 100%;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
    color: #b3b3b3;
    color: rgba(255, 255, 255, 0.3);
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
}
#header {
    padding-top:...

JavaScript

window.Todos = Ember.Application.create();

Todos.Router.map(function () {
    this.resource('todos', {
        path: '/'
    });
});

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

Todos.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

Todos.Todo = DS.Model.extend({
    title: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});

Todos.Todo.FIXTURES = [{
    id: 1,
    title: 'Learn Ember.js',
    isCompleted: true
}, {
    id: 2,
    title: '...',
    isCompleted: false
}, {
    id: 3,
    title: 'Profit!',
    isCompleted: false
}];