Mastering Ember

Observing Arrays

// component.js
// items: [{name:'a'},{name:'b'}],
onArrayChange: function() {
  console.log('Row count changed: ' + JSON.stringify(this.items));
}.observes('items.@each'),

onNameChange: function() {
  console.log('Name changed: ' + JSON.stringify(this.items));
}.observes('items.@each.name'),

Trigger Action

Ember.View.extend({
  templateName: 'labView',  
  items: [],
  click: function(event) {
    // Ember.$("#container-1").click();
    // this.$('#container-1').click();
    // this.$('#fname-3').val();
  }
}
});

// .hbs element with dynamic ids
<input type="text" id="fname-{{item.id}}" name="firstName">

String to Int value

parseInt(Id)

#10 | Bubble Up Action from Component to Contorller

// some-component.js 
this.sendAction('actionName', params, event);

// template
{{some-component actionName="foobar"}}

// controller
actions: {
   foobar(params, event) {
     alert('action received');
   }
}

#09 | Working with Arrays

Add to Array

this.get('names')
    .pushObject({
        id: Id, name:'newName'
    });

Remove from Array

let names = ['red', 'green', 'blue', 'yellow', 'orange'];
names.removeAt(0);     // ['green', 'blue', 'yellow', 'orange']
names.removeAt(2, 2);  // ['green', 'blue']

Edit an Object in an Array

var temp = this.get('names').objectAt(2);
Ember.set(temp, "name", "modified name");

#08 | onInit

  handleAuth:function(){
		var auth = this.get('service').get('isauth');
    	if(auth) {
    		Ember.$('.myClass').css("display","none");
      		this.set('isViewable',true);
    	} else {
    		Ember.$('.myClass').css("display","block");
    		this.set('isViewable',false);
    	}
    
  }.on('init'),

#07 | Ember Component Lifecycle

read more

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs() {
    this._super(...arguments);
    const contacts = this.get('data');
    if (typeof contacts === 'string') {
      this.set('contacts', JSON.parse(contacts));
    } else {
      this.set('contacts', contacts);
    }
  }
});

#06 | Ember Build/Deploy

$ember build -prod
$ember build --environment=development

#05 | Element by Id

Ember.$('#wrapper') will find this element in the page. this.$('#wrapper') finds the within the current component/view. The difference is in the scope.

Ember.$('#wrapper') vs this.$('#wrapper')

#04 | Ember automatically adds a class ‘active’ to currently activated route

one can just style this clss to see it in action

.active {
  background: yellow;
}

  
  {{#link-to 'about'}}About{{/link-to}}
  {{#link-to 'contact'}}Contact{{/link-to}}
  

Different Example

#03 | Wildcard Route for 404

// app/router.js
Router.map(function() {
  // other routes
  this.route('page-not-found', { path: '/*wildcard' });
});

// app/templates/page-not-found.hbs
Page Not Found
{{outlet}}

#02 | Helper Method

// app/helpers/increment.js
import Ember from "ember";

export function increment(integer){
  return ++integer;
}

export default Ember.Helper.helper(increment);

// app/templates/index.hbs
{{#each model as |contact index|}}
    #{{increment index}}. {{contact.title}}
{{/each}}

#01 | Setting up Mock/Hardcoded model within a Route

// app/routes/post.js
import Ember from 'ember';

var articles = [{
  id: 1,
  title: 'FirstPost',
  content: 'First Post'
}, {
  id: 2,
  title: 'About',
  content: 'About Splash'
}, {
  id: 5,
  title: 'Contact',
  content: 'You can reach us too!'
}];

export default Ember.Route.extend({
  model: function(params) {
    var index = params.post_id -1;
    return articles[index];
  }
});

// app/templates/post.hbs
Id:: {{model.id}}
title: {{model.title}}
body: {{model.content}}

Advertisements