5.1 Components — Introduction

1. HTML被设计在的时候，浏览器是一个简单的文件浏览器。开发构建大的Web应用程序需要更多的东西。

2. 而不是试图取代HTML，然而，Ember.js拥抱它，然后增加了许多新功能使得构建web应用程序现代化。

3. 目前，您仅限于由W3C您所创建的标签，W3C正在工作在自定义元素规范，这是一个好主意。

4. Ember的组件实现与Web组件规范尽可能的接近。一旦自定义元素在浏览器中广泛可用，你应该可以容易把你的Ember组件迁移到WEC标准并且使它们被其他框架使用。

5. 这是对我们如此重要，我们正密切与标准机构，以确保我们组件的实现匹配Web平台的技术路线。

6.为了强调组件的强大，这里有一个小例子，把一个博客帖子编程一个可重用的blog-post自定义元素，使你可以在你的应用程序中一遍又一遍的使用。

exapmle:

app/templates/index.hbs

{{#each model as |post|}}
   {{#blog-post title=post.title}}
     {{post.body}}
   {{/blog-post}}
{{/each}}

app/templates/components/blog-post.hbs

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>

app/routes/index.js

var posts = [{
    title: "Rails is omakase",
    body: "There are lots of à la carte software environments in this world."
  }, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
}];

export default Ember.Route.extend({
  model() {
    return posts;
  }
});

app/components/blog-post.js

export default Ember.Component.extend({
});