Новый todo создан, но не отображается - приложение todos с EmberJS без данных ember

Я начинаю работу с EmberJS, а затем Screencast. Я пытаюсь сделать приложение TODOs без данных ember. Ниже мой HTMLНовый todo создан, но не отображается - приложение todos с EmberJS без данных ember

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Ember.js • TodoMVC</title> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 
    <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?" value=newTitle action="createTodo"}} 
     </header> 

     <section id="main"> 
      <ul id="todo-list"> 
      {{#each}} 
       <li {{bind-attr class="isCompleted:completed"}}> 
       <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> 
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript" src="js/handlebars-v1.3.0.js"></script> 
    </script><script type="text/javascript" src="js/ember.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    </body> 
</html>

Javascript - все в одном месте.

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

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

Todos.TodosController = Ember.ArrayController.extend({ 
    actions:{ 
     createTodo: function(){ 
     var title = this.get('newTitle'); 
     if(!title.trim()){return;} 
     todos.push({ 
      id: todos[todos.length-1].id +1, 
      title: title, 
      isCompleted: false 
     }); 
     this.set('newTitle',''); 
     } 
    } 
}); 

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

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

Проблема заключается в том, когда я пытаюсь добавить новую запись Todo, он не отображается в пользовательском интерфейсе в качестве дополнительной, но когда я типа todos на консоли.

Я вижу, что новая запись была добавлена. Почему модель изменена, но ничего не отображается в пользовательском интерфейсе?

Я также заметил, что новая запись в массиве Todos не имеют методы, как getTitle, setTitle, get isCompleted, set isCompleted, что другие объекты имеют - что заставляет меня думать, что я, безусловно, не хватает чего-то здесь.

Кажется, мне нужно овладеть моделью для TodosRoute и добавить к ней, если это то, что мне нужно сделать.

Как я могу это сделать?

источник

2014-03-29 ykesh

Вы должны использовать todos.pushObject() вместо простых array.push().

Краткое описание: «Нажать объект на конец массива. Работает так же, как push(), но это KVO-совместимый». http://emberjs.com/api/classes/Ember.MutableArray.html#method_pushObject

Несколько более подробное объяснение: хотя Ember расширяет объекты JS, такие как массив по умолчанию, чтобы сделать их более грамотными в Emberland, он не отменяет существующие методы, такие как push(). Вот почему вам нужно использовать отдельный метод (pushObject) - это решение Ember, чтобы заставить привязку данных работать на объекты JS, такие как массив.

Почти то же самое относится к простым объектам JS: Ember имеет Ember.Object, которые не нужны, когда вам нужно только классический объект JS. Это не означает, что вы должны использовать Ember.Object каждый раз, в этом случае Ember достаточно умен, чтобы настроить привязку данных для вас на основе свойств, которые вы получаете из своего шаблона Handlebars.

источник

2014-03-29 10:34:52 zeppelin

Новый todo создан, но не отображается - приложение todos с EmberJS без данных ember

ответ

Смежные вопросы