目标
使用Emberjs制作一个简单的Todo应用，实现这样一个效果：通过在文本框输入文本，创建一条代办事项，代办事项可以选择优先级，完成的事项可以删除。
准备
完成这个应用，需要做点准备：
1、创建一个html页面，暂时不管样式；
2、脚本：emberjs，handlebars、jQuery。这三个脚本可以从网上获得，我们将把他们加入到head标签里去。
制作
创建页面，加入脚本，就可以开始制作应用。html代码如下：
复制代码 代码如下:
<!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>
</head>
<body>
</body>
</html>
按照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">/*视图助手*/</script>，还可以指定模板名称，在data-template-name属性里定义，待会我们添加列表项目时会需要用到。
在模板里需要通过视图助手（helper）来添加视图，语法也很简单，用两个花括号对包裹，里面通过模板关键字来指定要显示的视图，如：{{view App.AddItemView}}。其他模板助手可以在handlebar网站查到：。
现在先把文本框跟列表视图添加到页面上，修改后的body代码如下：
复制代码 代码如下: