EmberJS Training Notes

EmberJS Training Notes.md

EmberJS version used: 2.0

Pod

Single unit for a component where resources are grouped in a folder under app/

application pod is specific pod for the application.

Route

ember g route connections

Nested Route

ember g route messages
ember g route messages/index

In order to make nested route work:

In route.js

Router.map(function() {
  this.route('connections');
  this.route('companies');
  this.route('messages', function() {}); // nested route works with this
});

Testing

ember generate acceptance-test connections

Test url: http://localhost:4200/tests

ember test --server # Test on multiple browser (like InsFrame)

Model

model returns a Promise:

model() {
  return $.getJSON('...');
}

replaceWith: replace history transitionTo: push history

View

Use {{debugger}} inside template to debug.

{{link-to "Connections" "connection" class="foo bar"}}
{{#link-to "connection" class="foo bar"}}Connections{{/link-to}}

Component

.property('attrs.text') to prevent caching attribute text (when text changed, computed value changes). .property('attrs.text').volatile() to prevent caching completedly.

• classNames: pass css class name to component element.
• tagName: tag to use to render the component (this is great idea to support future when custom HTML tag is ready).
• Coposition should be always considered when building component (abstract attrs names instead of specific name: title, subTitle instead of name, description...).
• this.$ is used to query with component context.

<bootstrap-tokenfield tokens={{model.recipients}} on-change="recipientChanged"></bootstrap-tokenfield>

* tokens, on-change: named based on the compoent
* recipientChanged: named based on domain (caller)

• Feed

{{component item.type item=item}} // invoke component named item.type dynamically

Services

Services live across application.

Create an authenticated route.

Ember Data

• Not required, recommended.
• Ember Data is a service

Bugs

• Lot of bugs
• Ember cli is not mature
• Live reload does not work in some case (have to restart server)