我正在开始使用 EmberJS，遵循 Screencast 。我正在尝试在没有 ember-data 的情况下执行 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>
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
}];
问题是当我尝试添加新的待办事项条目时，它不会按添加的方式显示在 UI 中，但当我在控制台上键入 todos 时。
我看到新条目已添加。为什么模型改变了，但UI上却没有任何显示？
我还注意到 todos 数组中的新条目没有诸如 getTitle、setTitle、get isCompleted、 之类的方法设置其他对象具有的 isCompleted - 这让我觉得我在这里绝对没有遗漏任何东西。
看来我需要掌握 TodosRoute 的模型并添加到其中，如果这是我需要做的。
我怎样才能做到这一点？
最佳答案
您必须使用todos.pushObject()而不是简单的array.push()。
简短说明:“将对象推到数组的末尾。工作方式与push() 类似，但它符合KVO 标准。” http://emberjs.com/api/classes/Ember.MutableArray.html#method_pushObject
稍微长一点的解释:虽然 Ember 默认扩展了 JS 对象(如数组)以使它们成为 Emberland 中更好的公民，但它不会覆盖现有方法，如 push()。这就是为什么您需要使用单独的方法 (pushObject) - 这是 Ember 的解决方案，使数据绑定(bind)能够在 JS 对象(如数组)上工作。
对于普通 JS 对象来说几乎是一样的:Ember 有 Ember.Object，其中 has some methods of it's own ，当您只需要一个经典的 JS 对象时就不需要这些。这并不意味着您每次都必须使用 Ember.Object，在这种情况下，Ember 足够智能，可以根据您从 Handlebars 模板访问的属性为您设置数据绑定(bind)。
关于javascript - 新待办事项已创建但未显示 - 带有 EmberJS 且不带 ember-data 的待办事项应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22729768/