component init sample
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
{{#if isLoading}}
<p>Loading...</p>
{{else}}
{{#each users as |user|}}
<li>{{user.name}} :
{{#if (isemail user.email)}}
{{user.email}}
{{else}}
<span style="color: red">(The email is invaild)</span>
{{/if}}
</li>
{{/each}}
{{/if}}
<h1>Welcome to {{appName}}</h1>
{{my-comp}}
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export function isEmail(params/*, hash*/) {
let email = params[0];
let mustHaveChar = ["@",".com",".co.id",".id",".org"];
let didHasWord = 0;
mustHaveChar.forEach(function (word) {
didHasWord = didHasWord + email.includes(word);
});
return (didHasWord > 1);
}
export default Ember.Helper.helper(isEmail);
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.set('isLoading', true);
$.ajax('https://jsonplaceholder.typicode.com/users').then((data) => {
this.set('users', data);
this.set('isLoading', false);
});
}
})