a blog for those who code

Thursday, 14 July 2016

Getting Started with Ember Models

In this post we will be discussing about Ember Models. In the previous post we had Introduced Ember, where we have said that because of its simple syntax and an emphasis on reuse and components, this JavaScript framework can make it very easy to create interactive pages. Ember is a collection of pieces which will help you to develop a Single Page Application (a.k.a. SPA) which contains routes, components, ember data, templates and models.

Ember Models

Ember Models are objects that represent the underlying data that your application presents to the user. A model is a class that defined the properties and behavior of the data that you present to the user. For creating a new model you need to create a new file under the models folder and extend from Model. You can also use ember-cli to generate model for you as shown below:

ember generate model Model1

It will set up a model as well as the unit test if you are going to do test on this model. If you go inside the model you will notice the below code :

import Model from 'ember-data/model';
// import attr from 'ember-data/attr';
// import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({

Now we need to define the attributes to the model which is done as shown below :

attr1: attr('string'),
attr2: attr('number'),
attr3: attr('boolean'),
attr4: attr('date')

Now we need to create the relationship using ember-data/relationships which has too options

belonsTo : Indicates child or one-to-one relationship
hasMany : Indicates parent or many-to-many relationship

Full Model Code with Relationships

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  attr1: attr('string'),
  attr2: attr('number'),
  attr3: attr('boolean'),
  attr4: attr('date'),
  relationship1: belongsTo('Model2'),
  relationship1: hasMany('Model3')

This means that our Model1 belongs to Model2, we can have a number of Model1 attached to Model2. And also our Model1 has many Model3.

Interacting With BackEnd Data using Ember data store

Saving Objects

The advantage of using Ember data store is that data store will acts as your server regardless of the where your data is going. Ember automatically makes the store available in actions, which are methods that responds to various events. The actions are created in routes and controllers and they are available using this keyword as shown below.

var datastore = this.store;

var model1 = datastore.createRecord('Model1', {
 attr1: '1st record',
 attr2: 1,

model1.save().then(function() { console.log('Data Saved'); });

The save() returns a promise which makes easy to asynchronously handle success and failure scenarios.

Retrieving Objects

We can retrieve results using two method findRecord and peekRecord. findRecord loads a single record by ID from the backend server whereas peekRecord loads a single record by ID from the store but does not contact the server.

var datastore = this.store;

datastore.findRecord('Model1','MyID').then(function(loadData) {

We can also load multiple records using findAll, retriveAll, query and queryRecord.

Updating Data

For updating the data we need to first load the data, make the changes using set and then call save() to save it. Ember adds state to each record which can be retrieved by hasDirtAttributes property which is true if you have modified data in current object and changedAttributes() function which will give a collection of all changed attributes.

var datastore = this.store;

datastore.findRecord('Model1','MyID').then(function(loadData) {
  loadData.set('attr1', 'Updating attr');
  loadData.save().then(function() { 
    console.log('Data Modified'); 

So in this post we have discussed about the Object Model which augments JavaScript objects with observers, computer properties, inheritance, mixins and other useful functions. Most objects in Ember, including routes, Ember Data models, services and components extend Ember.Object.

Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment

Contact Us


Email *

Message *


Best Hosting Plans

CC License