Welcome to weblogs.com.pk Sign in | Join | Help

Getting Started with Ember-CLI

In the previous Hello Ember-CLI post; we created a simple project with one model and its associated router and template. Lets continue working from there!

If we add model() {} and return something from there in the router (controller); the returned object (or array) will become the model and we can access this model using “model” keyword in the associated (hbs) template. Lets return an array of invoices and show them in the list like so


  • Note that we are returning the special “id” field / data; its not part of our model but its required and its presence is understood and expected
  • Note the use of {{log variable}} in the hbs template; in the debug build; we will be able to see the variable in the f12 tools' console view; in chrome we can right click the output and store into temp-variable and then use Ember.inspect(temp-variable)!
  • Note the use of {{#each}} and {{/each}} and how each item of model is casted to |invoice| and then its attributes are used in the hbs template

Next, lets add Ember Data; the client side data access library. Ember Data uses adapters and serializers to communicate with backend server; the router will use Ember Data API and it takes care of connecting with backend server with configured adapters and serializer.

Typically at this stage; the backend developers should start working on their thing and frontend developers need some sort of mechanism that they can continue to work on their thing in the absence of backend server. This is where Ember CLI Mirage comes; its the client side mock server to develop, test and continue to prototype our Ember application. Install it using >ember install ember-cli-mirage and it will create app\mirage folder


To use Ember Data; we can access it in the router using “this.store”; lets return all invoices using this.store.findAll(‘invoice’); invoice here is the model type! By installing mirage above it already has configured itself and we now need to return “data” in app\mirage\config.js. It has lot of functionality and one can read how to use in memory database; I am simply returning the hard coded values. Read http://engineering-blog.alphasights.com/testing-ember-with-mirage to get started with Ember CLI Mirage!


  • Note that we have to change the structure of the returned JSON; its because Ember Data uses JSONAPI Format for communication by default; model fields are now part of attributes!
  • Note that I am using Chrome with Ember Inspector to know why its not showing expected things
  • Also notice that our camel cased fields; invoiceNumber and createDate are not populated; its because of JSONAPI Format

Ember app has a default serializer and adapter configured which are used; we can override their behavior but we need to generate their JS files; for this we can issue ember. Use >ember generate serializer application to generate the JS file where we can fine tune it for our camel case issue like so


  • You can learn about default serializer and how we can extend it on the Ember JS site
  • On the same line; we can issue >ember generate adapter application to generate JS file for default Adapter; for the time being there is no need of it

Lastly lets beautify our interface using bootstrap by adding ember-bootstrap addin that takes care of all the things and allow us to start using bootstrap in our hbs templates right away like so


Published Monday, February 29, 2016 4:21 PM by khurram
Filed under: ,


No Comments

New Comments to this post are disabled