<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} <a href="#" {{action removeItem target="this"}} >X</a>
</script>
现在新增加的项目都会有个叉在右边，点击时就把当前项目删除。
最后还可以做点改进，当鼠标移动到项目上时才显示删除链接，完成这个功能，需要修改itemViewClass以及在模板里增加逻辑判断助手{{#if}}。你可以自己试着去做，也可以看看最后完整的代码。
复制代码 代码如下:
full code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember--第一个应用</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="https://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script>
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('欢迎使用待办事项应用');
}
}
);
/********************
model
********************/
App.TodoModel = Em.Object.extend({
status:'',
value:'',
title:function(){
return '['+this.get('status')+']'+this.get('value');
}.property('status','value')
});
/********************
view
********************/
App.AddItemView = Ember.TextField.extend({
placeholder:'输入待办事项',
elementId:'add',
insertNewline:function(){
var item = App.TodoModel.create({
status:App.selectController.get('selected'),
value:this.get('value')
});
App.todoStore.pushObject(item);
this.set('value','');
}
});
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));},
mouseEnter:function(){this.set('hover',true);},
mouseLeave:function(){this.set('hover',false);}
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:[]
});
App.selectController = Ember.Object.create({
selected:'低',
content:['高','中','低']
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<span>请输入待办事项：</span>{{view App.AddItemView}}<br/>
<span>请选择优先级：</span>{{view Ember.Select contentBinding="App.selectController.content"
selectionBinding="App.selectController.selected"}}
{{view App.ListView}}
</script>
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} {{#if view.hover}}<a href="#" {{action removeItem target="this"}} >X</a>{{/if}}
</script>
</body>
</html>