gokatz
4/18/2017 - 5:07 AM

component init sample

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