香格里拉烤鸡腿的博客

欢迎加入Ember旅程！ 本次旅程的意义是向你阐述基本的Ember概念，帮你创建一个看上去是那么个性化的应用。如果你在旅程的任何环节有疑惑，因而不能让你顺利的完成旅程。那么请下载这个现成的例子。你可以参照”快速开始“中所描述的，安装最新版本的Ember。Ember CLI – Ember的命令行工具，它为你提供了标准的项目结构和一系列的工具。它能帮助开发者将精力集中在打包app，而不是放在其他依赖的

截止到目前，我们已经生成了4个顶层路由： about路由，用来展示app的信息。 contact路由，显示公司的联系方式。 rentals路由，向用户展示租赁信息。 index路由，被设置为将用户重定向到rentals路由。 rentals路由承载了许多的功能。通过直接的旅程，我们知道当中包含的搜索功能，以及展示详情的功能。为了更好了满足这些需求，接下来我们将会通过Ember的嵌套路由特性来实现相应

正如用户在搜索租赁信息，正常情况下他们会指定他们的搜索条件，比如按照所在城市来搜索。然而我们之前建立租赁列表仅仅罗列了所有租赁条目。我们现在要创建一个过滤器组件，可以让用户在输入框中输入他们想要的搜索条件，并得到他们想要的结果。开始行动，我们创建一个新组件。我们称之为list-filter，让它来实现搜索过滤功能：ember g component list-filter我们之前创建rental-l

当用户在浏览我们的租赁列表的时候，他可能需要网页提供一些交互可以帮助他做决定。那让我们给所有租赁信息都加上一个可以切换图片大小的功能。为了实现这个功能，我们将会使用组件。现在生成一个名叫 retal-listing的组件，用它来管理每条租赁信息的行为。命名组件时必须要加上 “-”符号，这样做是为了避免与HTML元素名称起冲突。所以 retal-listing 是合法的命名，但是retal是不合法的命

到目前为止，我们的应用展示的数据是从Ember data的model中获取的。随着应用变得日益复杂 ，我们可能会考虑在数据呈现给用户之前能够加以控制。出于这个原因，Ember提供了Handlerbars模版帮助我们用以对数据进行加工。现在让我们通过Handlerbars来帮助用户迅速的看到某个信息是属于 “standalone” 还是 “Community”。生成rental-property-ty

对于Super Rentals应用，我们希望它能显示出每个出租点的位置。为了实现这个功能，我们进一步发掘Ember的潜力： 利用工具调用Google地图接口创建一个地图。 利用一个服务来将每个租赁地点的地图信息进行缓存。 利用一个组件来对租赁列表中的每个租赁点进行展示。 接入Google地图在实现地图功能之前，我们需要在app中接入一个第三方的地图API。其实有很多方法可以在Ember中引入第三方库

截止到本章前，我们的app依然使用着定义在rentals路由模板中的硬编码租赁信息。为了能适应应用的不断增长，我们要考虑从远程服务器来动态的获取这些数据。并且要更进一步的增加应用使用时的灵活性，比如：根据条件筛选租赁信息。Ember集成了一个叫 Ember Data 的数据管理支持库，可以帮助我们完成远程数据的请求。使用Ember Data时，需要按照它的要求，通过继承DS.Model来定义你所需要

Ember拥有丰富的插件生态系统可以让你很容易的在项目中使用它们。插件为项目提供了非常广泛的支持，可以让你解放到基本只需要关注项目本身。若需要查看插件列表，请访问 Ember Observer 站点。该站点将插件分类汇总并且已经发布到NPM。至于我们的Super Rentals项目，我们将采用其中两个插件： ember-cli-tutorial-style 和 ember-cli-mirageemb

现在呢，让我给rentals页面添加一些可用的租赁信息。Ember通过model对象来保存给页面的数据。为了简单起见，我们暂时将model对象中的数据硬编码。稍后，我们会使用Ember Data 来达成这个目的。（Ember Data – 一个给力的数据管理支持库，内置于Ember）下面这张图片，就是主页最终的样子： 在Ember中，路由处理程序主要负责将model中的数据读取出来然后传递给页面。

对于Super Rentals这个项目，我们首先是要能够访问到它的主页。然后紧接着可以访问到 关于页面 和 联系页面。 about路由 让我们从构建“about“页面开始。 在Ember中，当我们想创建一个通过URL访问的新页面时，我们需要使用Ember CLI来生成路由。你可以通过阅读核心概念章节来快速的浏览Ember的架构。 好了，那么现在就生成一个路由吧： ember ge

为了展示创建Ember应用的基本步骤，我们通过一个租赁网站例子来贯穿整个流程。我们将从主页，关于页面和联系页面开始。开始之前，我们来看一下我们最终的目标。 开始做吧。先思考下需要让应用做什么： 在主页显示租赁信息。 需要一个连接到该租赁网站公司的链接。 需要一个连接到联系人信息的链接。 展示一个有效的租赁信息列表。 一个根据能城市搜索过滤的过滤器。 能看到被选择的租赁信息的详情。 在本节的剩余部分

英文原版：https://guides.emberjs.com/v2.13.0/tutorial/deploying/翻译略部署章节就不翻译了，看完整旅程篇的童鞋，可以继续从Ember教程（三）接着阅读了。希望我翻译的让你还能接受。我将继续翻译Ember 教程剩余的篇章。并且将持续翻译Ember周边的文章。如果你有好的推荐或者是想了解什么，可以留言。我会安排翻译。