有需要使用Ember.js创建一个简单的Todo应用，可以参考下。

目标
使用Ember.js创建一个简单的Todo应用，实现这样一个效果：通过在文本框输入文本，创建一条代办事项，代办事项可以选择优先级，完成的事项可以删除。

准备
完成这个应用，需要做点准备：
1、创建一个html页面，暂时不管样式；
2、脚本：emberjs，handlebars、jQuery。这三个脚本可以从网上获得，我们将把他们加入到head标签里去。

制作
创建页面，加入脚本，就可以开始制作应用。html代码如下：

<script type="text/java script" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/java script" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js">
<script type="text/java script" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js">

按照ember的要求，需要用Ember.Application.create()先创建应用实例，这也作为应用的命名空间。这个create方法可以传递一个对象属性ready，属性值是一个函数，在应用准备就绪时调用。Ember还可以使用缩写Em来代替。

在Ember中有一个Em.Logger对象，相当于window.console，可以用来调试。我们可以在这个ready加入一个消息，显示在控制台中。

现在，在head标签里再增加一个script标签来写应用的脚本，实例化一个ember应用，顺便把MVC各模块的区域也加上。脚本代码如下：

/********************
application
********************/

window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('欢迎使用待办事项应用');
}
}
);

/********************
model
********************/

/********************
view
********************/

/********************
controlle
********************/

然后，我们需要一个输入框来输入代办事项，需要创建一个ember文本框视图。ember视图可以用Ember.View类来创建（使用create方法）或扩展（使用extend方法）一个新的视图类。不过对于文本框视图，ember提供了更直接的方式——Ember.TextField类，我们可以先使用这个类来扩展一个自定义的视图，然后再实例化添加到页面上。我们将这个文本框视图类命名AddItemView 。

在脚本代码里的view区域添加上文本框视图代码：

App.AddItemView = Ember.TextField.extend({

});

可以给它加个提示语，html5支持placeholder，可以拿来用。还需要在按下回车时将内容添加到代表事项列表，这里需要用到一个属性：insertNewline，在按下回车时会调用相应的函数。加入后的代码如下：

App.AddItemView = Ember.TextField.extend({
placeholder:'输入待办事项',
insertNewline:function(){}
});

由于现在还没确定具体添加方法，函数体暂时先不写。

用户在按下回车时增加一条代办事项，需要一个列表来显示，在ember中可以创建CollectionView来存放列表项目视图，对于CollectionView，默认会有一个content属性用于存放列表项目对象，其属性值是一个数组。为了让其列表显示为ul列表，需要定义CollectionView的标签名（tagName）为“ul”。我们给这个列表视图命名为ListView，并增加到文本框视图的下方。最后代码如下：

App.ListView = Ember.CollectionView.extend({
content:[],
tagName:'ul'
});

现在如果打开页面，是没显示任何内容的，因为视图还没被渲染，要将视图显示出来，需要handlebar模板的支持。

现在来修改html页面的body块，加入刚创建的两个视图，看看效果。

添加handlebar模板的方法是<script type="text/x-handlebars">/*视图助手*/，还可以指定模板名称，在data-template-name属性里定义，待会我们添加列表项目时会需要用到。

在模板里需要通过视图助手（helper）来添加视图，语法也很简单，用两个花括号对包裹，里面通过模板关键字来指定要显示的视图，如：{{view App.AddItemView}}。其他模板助手可以在handlebar网站查到：http://handlebarsjs.com/。

现在先把文本框跟列表视图添加到页面上，修改后的body代码如下：

<script type="text/x-handlebars">
请输入待办事项：{{view App.AddItemView}}

{{view App.ListView}}

现在刷新页面，会显示一句“请输入代办事项”跟一个文本框，列表由于没有内容，不会显示。

这个时候我们可以在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模板，并且会用到上面给出的模板名称，代码如下：