Component Full Test
{
"version": "0.6.4",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember-template-compiler.js"
}
}
<hr>
<p>Child Component</p>
{{yield}}
{{input value=age placeholder='Enter age'}}
<hr>
<button {{action 'click2'}}>click</button> <p>Click after entering name and age</p>
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
click2: function() {
this.get('fromParent')(this.get('age'));
this.set('age', '');
}
}
});
<p>Parent Component</p>
{{input value=name placeholder='Enter name'}}
<br><br>
{{#if msg}}
<div style="background:yellow">Msg :{{msg}}
</div>
{{/if}}
{{comp-two fromParent=(action "mclick1" name)}}
<div style="background:red; color:white">{{errorTxt}}
</div>
import Ember from 'ember';
export default Ember.Component.extend({
helpTxt: "This Component Tries to steal Parent's Name. Watch Out",
actions: {
mclick1: function(name, age) {
if(!name || !age) {
this.set('errorTxt','Please enter both name and age');
this.set('msg', '');
return;
}
var displayTxt = `Wow! ${name} is ${age} years Old [Age "${age}" is obtained from Child Component]`;
this.set('msg',displayTxt);
this.set('name', '');
this.set('errorTxt', '');
}
}
});
<h1>Component Work-out : Fuction Currying</h1>
<br>
{{comp-one}}
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});