Javascript 已创建但未显示的新待办事项-带有EmberJS但不带ember数据的待办事项应用程序_Javascript_Ember.js

Javascript 已创建但未显示的新待办事项-带有EmberJS但不带ember数据的待办事项应用程序

javascript ember.js

Javascript 已创建但未显示的新待办事项-带有EmberJS但不带ember数据的待办事项应用程序,javascript,ember.js,Javascript,Ember.js,我开始使用EmberJS，接着是。我正在尝试在没有余烬数据的情况下使用TODOs应用程序。下面是我的HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>Ember.js • TodoMVC</title> <link rel="stylesheet" href="css/style.css"> <

我开始使用EmberJS，接着是。我正在尝试在没有余烬数据的情况下使用TODOs应用程序。下面是我的HTML

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

问题是，当我尝试添加新的todo条目时，它不会显示在添加的UI中，而是在控制台上键入

todo

时

我看到新条目被添加了。为什么模型改变了，但UI中什么也没有显示

我还注意到，todos数组中的新条目没有其他对象所拥有的方法，如

getTitle

，

setTitle

，

getiscompleted

，

setiscompleted

，这让我觉得这里肯定没有遗漏什么

似乎我需要获得TodosRoute的模型并添加到其中，如果这是我需要做的

我该怎么做？

您必须使用

todos.pushObject（）

而不是简单的

array.push（）

简短解释：“将对象推送到数组的末尾。其工作原理与Push（）类似，但与KVO兼容。”

稍长一点的解释：虽然默认情况下，Ember扩展了诸如array之类的JS对象，使它们成为Emberland中更好的公民，但它并没有覆盖现有的方法，如

push（）

。这就是为什么您需要使用一个单独的方法（

pushObject

）——这是Ember的解决方案，它可以使数据绑定在JS对象（如数组）上工作

对于普通的JS对象也是如此：Ember有

Ember.Object

，当您只需要一个经典的JS对象时，就不需要它了。这并不意味着您每次都必须使用

Ember.Object

，在这种情况下，Ember足够智能，可以根据您从Handlebar模板访问的属性为您设置数据绑定

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