Ember components

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

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

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

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>

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

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

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

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

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

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');
}
});

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

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

Ember components

More Related Content

What's hot (20)

Recently uploaded (20)

Ember components