Introduction Edit Page


HTML was designed in a time when the browser was a simple document viewer. Developers building great web apps need something more.

Instead of trying to replace HTML, however, Ember.js embraces it, then adds powerful new features that modernize it for building web apps.

Currently, you are limited to the tags that are created for you by the W3C. Wouldn't it be great if you could define your own, application-specific HTML tags, then implement their behavior using JavaScript?

That's exactly what components let you do. In fact, it's such a good idea that the W3C is currently working on the Custom Elements spec.

To highlight the power of components, here is a short example of turning a blog post into a reusable blog-post custom element that you could use again and again in your application. Keep reading this section for more details on building components.

app/templates/index.hbs
1
2
3
4
5
{{#each model as |post|}}
   {{#blog-post title=post.title}}
     {{post.body}}
   {{/blog-post}}
{{/each}}
app/templates/components/blog-post.hbs
1
2
3
4
5
<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>
app/routes/index.js
1
2
3
4
5
export default Ember.Route.extend({
  model() {
    return this.store.findAll('post');
  }
});
app/components/blog-post.js
1
2
export default Ember.Component.extend({
});