新的待办事项已创建但未显示 - 带有EmberJS的待办事项应用程序,没有余烬数据
New todo created but not displayed - todos app with EmberJS without ember-data
我开始使用EmberJS,然后是截屏视频。我正在尝试在没有余烬数据的情况下做 TODOs 应用程序。以下是我的网页
<!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
set isCompleted
等方法 - 这让我觉得我在这里绝对没有遗漏一些东西。
似乎我需要掌握TodosRoute的模型并添加它,如果这是我需要做的。
我该怎么做?
您必须使用 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 模板访问的属性为您设置数据绑定。
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Emberjs应用程序加载在除Index之外的所有路由上
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- angular 1.5应用程序中的导航栏
- 在Web应用程序中使用Highcharts javascript
- angularjs+rails应用程序中未显示模板
- 使用acess代币登录Facebook,并通过网络应用程序离线发布
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 余烬.为真正的大应用程序延迟加载模板和 JavaScript
- 基于骨干.js/余烬的应用程序与基于Phonegap/Sencha Touch的应用程序有什么区别.js?
- 使用现有Rails应用程序将路由从Rails迁移到Ember;余烬轨道”;
- 余烬应用程序不发布到服务器与余烬数据
- 无法在余烬应用程序加载存储在Therubyracer
- 余烬应用程序性能
- 新的待办事项已创建但未显示 - 带有EmberJS的待办事项应用程序,没有余烬数据
- 覆盖余烬应用程序.哈佛商学院的模板