<body>
<script type="text/x-handlebars">
<span>请输入待办事项：</span>{{view App.AddItemView}}<br/>
{{view App.ListView}}
</script>
</body>
现在刷新页面，会显示一句“请输入代办事项”跟一个文本框，列表由于没有内容，不会显示。
这个时候我们可以在content里添加点内容，比如content:['a','b','c']，然后刷新页面，你会发现列表区域只有三个小黑点（如果你没重置列表样式的话）。因为你在content里添加了三项，但列表项还没有指定一个显示的模板，所以，显示为空。为了让你看到效果，我们来给列表项定义个显示的模板吧。这里需要处理两个地方，第一是在页面加指定名称的模板，第二是在列表视图里定义列表项目的属性。
定义列表项目，需要用到itemViewClass，它会将每个content项传递进去并用指定的模板显示。先来修改列表视图ListView 吧，给它增加itemViewClass属性，这也是一种视图，所以需要用Ember.View来创建，在创建时同时指定用来显示的模板名称为itemTemplate，这个名称同时将为出现在html的handlebar模板名称里。修改后的代码如下：
复制代码 代码如下:
App.ListView = Ember.CollectionView.extend({
content:['a','b','c'],
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
})
});
还差一步就完成了，现在来修改html，我们需要在body里再新建一个handlebar模板，并且会用到上面给出的模板名称，代码如下：
复制代码 代码如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
</script>
接着同样是添加模板助手，要把每一个content项传递给助手，会用到view.content。添加如下代码：
复制代码 代码如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content}}
</script>
完成后，刷新页面，现在终于把content里的内容显示出来了，而且，模板会自动加上li标签。
继续完善我们的应用。我们总不能把content的内容写成固定的吧，这样用户还怎么添加呢。所以，现在考虑把用户要添加的项目保存到一个数组里，然后content自己去取这个数组的内容。同时，ember框架支持双向绑定，当数组内容修改时，通过绑定的content也会同时改变，反之亦然。现在，就创建一个ember数组，然后跟content绑定吧。
ember数组可以通过ArrayController类来创建，它会把你传进去的普通javascript转变为一个新的ember数组对象，我们把用来管理项目的数组命名为todoStore，放到html页面的controller区域，创建的代码如下：
复制代码 代码如下:
App.todoStore = Ember.ArrayController.create({
content:[]
});
现在可以把ListView 里的content数组放到这个todoStore 的数组里，然后绑定ListView 里的content到todoStore 上，这两个对象将修改为如下所示：
复制代码 代码如下:
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate'
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:['a','b','c']
});
Binding是个后缀，表示绑定，属性值是绑定的对象，默认取该对象的content属性。修改完成后刷新页面，如果你看到的页面跟修改之前的一样，说明修改成功了。接着，是时候去掉content里的值了，我们需要的数据将由用户在文本框里输入。
考虑现在的交互过程，用户在文本框输入内容，按下回车，程序获取到该事件，调用一个方法创建一个新对象，再把这个新对象送给todoStore ，由于绑定作用，列表会自动增加一项。
是时候改造下文本框视图了，还记得insertNewline吗？我们可以在这里创建新的项目。我们会用到三个方法：set()设置属性值、get()获取属性值、pushObject()添加数据，修改AddItemView 后的代码如下：
复制代码 代码如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'输入待办事项',
insertNewline:function(){
var item = this.get('value');
App.todoStore.pushObject(item);
this.set('value','');
}
});
现在刷新页面，然后输入内容，按回车，列表会添加输入的内容，说明修改成功，如果你没把todoStore 的content属性里的内容清空的话，现在会有4个列表项了。
距离我们的目标还有一半啊，我们还缺少两个功能：选择优先级跟删除完成的项目。
要增加下拉列表，可以使用另一个方便的视图：Ember.Select。我们可以直接在模板里直接创建一个，同样通过绑定，把下拉列表视图的content绑定到另一个ember对象上，然后设置默认选中的优先级。优先级也需要用到绑定，这样在页面上选择的时候，才会同时修改对应的ember对象里的内容。先来创建这个ember对象，自定义该对象的selected属性表示选中的值，其他名称也行，这段代码会加到todoStore对象的下面，命名为selectController，代码如下：
复制代码 代码如下: