Introduction to ember components

1. Ember Components
Ember's implementation of components hews as closely to
the Web Components specification as possible.

2. Web component is a reusable
components By encapsulating html and
javascript.

3. Add Action:
Action can be added to any dom
element
<div class="bar" {{action
"hello"}}>

4. Define component template:
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>

5. Using component
Action can be added to any dom
element
{{blog-post}}

6. Passing Parameters:
We can pass parameters to the
component.
{{blog-post title=title}}

7. Pod Style Components
Pod style for components can be
used to implemented for
improved abstraction.

8. Ember Addons http://www.emberaddons.com/

9. Create an ember Addon
addons can be easily created
using ember-cli
ember addon ember-cli-
search-text

10. Javascript:
Extend the functionality the new component.
addon/components/ember-cli-search-text.js
import Ember from 'ember';
export default Ember.Component.extend({
focus: false,
didInsertElement: function() {
console.log('did insert element invoked');
var thing = this.$('textarea');
console.log(thing);
},
willDestroyElement: function() {
console.log('will destroy invoked');
this.$('textarea').destroy();
},
keyUp: function() {
console.log('keyup invoked');
}
});

11. HTML
update the template for the new
component.
{{textarea value=content}}

12. Publish Addon
Addon can be published to the
ember addon simply by npm
publish.
npm version 0.0.1
git push origin master
git push origin --tags
npm publish

13. Fin