Ember.js(二):创建一个Ember应用程序
创建一个Ember应用程序
至此，我们可以通过向我们的router添加状态来构建一个应用程序。我们将会通过创建一个简单的应用程序来让你了解Ember的核心内容。
现在开始添加一些其他的标记和outlet到现在空的application模版当中
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Committers</h1>
{{outlet}}
</script>
Outlet帮助比较模版中将根据应用程序状态动态改变的部分。任何一个模版都可以包含任意多个outlets，这个特性使得你可以更加精细的控制视图的层次结构。
接下来，添加所有贡献者的视图，并匹配控制器和模版。
// in your page body or head:
<script type="text/x-handlebars" data-template-name="contributors">
{{#each person in controller}}
{{person.login}}
{{/each}}
</script>
App.AllContributorsController = Ember.ArrayController.extend();
App.AllContributorsView = Ember.View.extend({
templateName: 'contributors'
});
在路由中找到匹配路径为(”/”)的路由，并实现connectOutlets方法。该方法只有一个参数那就是你的应用程序的路由，在方法中获取ApplicationController 的实例并且使用connectOutlet 方法关联它的outlet：
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('applicationController').connectOutlet('allContributors', [{login:'wycats'},{login:'tomdale'}]);
}
})
现在重新加载你的应用程序。你不会看见太多，但是这会让你发现浏览器中存在的一些错误。
现在让我来缓解一下你内心中的恐惧。确实，这里突然增加了许多代码，并且显得有些古怪和复杂。当然你也可以使用更少的代码完成相同的任务通过使用Backbone或者Angular。但是Ember不是以完成这种复杂等级的应用作为目标，所以在刚开始时会显得愚蠢和冗长。
现在倒过来分析一下我们的应用程序
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('applicationController').connectOutlet('allContributors', [{login:'wycats'},{login:'tomdale'}]);
}
})
当你的用用程序通过url”/”加载时，Ember会自动将应用程序的状态转换到我们命名为index的状态中。connectOutlets方法将会调用。connectOutlets方法作为将视图视图与状态向连接的回调函数。在当前这个例子中，我希望将在应用程序模版中的{{outlets}}用来显示所有的项目贡献者，所以我获取应用程序中的唯一的实例ApplicationController并且调用connectOutlet方法并把allContributes作为参数。
这里需要注意的一点事，当我们的应用程序完成initialize后，每一个器都会创建唯一的一个实例，由于你可能系统能从router中获取到这些实例，这些控制器实例豆浆作为router的以控制器的名字（注意头字母应该切换为消息如：ApplicationController对应的名字应该是applicationController）作为一个属性，你可以直接在router中获取到这些控制器实例。
控制器拥有控制它们视图中outlets内容的能力，在当前这个例子中，我将allContributors作为connectOutlet方法的参数。这个操作将会为我们创建AllContributorsView实例，并且将AllContribuorsController作为视图默认的上下文环境，并且将其插入到视图的模版的{{outlet}}中。第二个参数我创建了一个数组对象，该对象将作为控制器实例的content。
App.AllContributorsController = Ember.ArrayController.extend();
App.AllContributorsView = Ember.View.extend({
templateName: 'contributors'
});
AllContributorsController是Ember的ArrayController的子类，ArrayController作为在Ember当中数组形式对象的容器并且对content实现简单的代理。
在我们的模版中我们调用{{each person in controller}}将会遍历我们的ArrayController中的数组对象的每一个属性
// in your page body or head:
<script type="text/x-handlebars" data-template-name="contributors">
{{#each person in controller}}
{{person.login}}
{{/each}}
</script>