Ember JS Interview Questions

Observers in ember.js what are they?

These are something which contains the behaviour that reacts to changes made of or in other properties. It is performed when there is need to perform some behaviour after binding has finished synchronizing. The New ember dev team uses the observers. They are mostly used in the ember frameworks of that they are these are the appropriate solutions. It can be set on an object:: Syntax :: “ember.observer” they are synchronous. If there is any change in the properties they will fire immediately the changes. By this way we can identify the bugs that of which properties are not synchronized.

What is Enumerables in ember.js ?

It is an object that contains child objects and allows you to work with the children by using the ember.enumerable API’s. The enumerable API’s directs to ECMAScript as much as needed and minimises the incompatibility with other lib & allows ember.js to use native browser.

Ember.js application template ?

Application template is default that is rendered when application starts.

Example::

<header>
  <h1>Igor's Blog</h1>
</header>

<div>
  {{outlet}}
</div>

<footer>
  &copy;2013 Igor's Publishing, Inc.
</footer>

What is ember.mixin class ?

Ember.mixin allow you for creating mixins, That those can be added for other classes in instance.

Example::

App.Editable = Ember.Mixin.create({
  edit: function() {
    console.log('starting to edit');
    this.set('isEditing', true);
  },
  isEditing: false
});
//Comment:: by passing them to first arguments.
App.CommentView = Ember.View.extend(App.Editable, {
  template: Ember.Handlebars.compile('{{#if isEditing}}...{{else}}...{{/if}}')
});
commentView = App.CommentView.create();
commentView.edit(); // outputs 'starting to edit'

Note:: Mixins are created with “ember.mixin.create” but not with “ember.mixin.extend”.

What is ember.namespace.class ?

Namespace is the object that contain other methods or objects of an framework or an app. If you want to define a new container then create a namespace any time.

Syntax::

MyFramework = Ember.Namespace.create({
  VERSION: '2.0.0'
});

What is Ember.js is & how to create an application in ember.js ?

It is an open source tech literature in javascript dependent on view pattern of model and was developed by core team members of ember.

Steps To Create app in ember.js::

• Install ember-cli.
• Create a new app by using ember new.
• For material design use materialise-CSS for styles.
• Using ember g component create components.
• Check if there is a router.js where in your routes are defined.
• Create a sample video card component that will iterate over & display on video page.

List out main components of Ember.js ?

• Defining a component.
• Component Lifecycle.
• Passing properties to component.
• Content wrapping in a component.
• Component’s element customizing.
• Usage of block params.
• Events handling.
• Actions triggering with actions.

What is Ember-data ?

Ember with data management lib is called as ember-data that deals with app data & define the structure of data. By using ember-cli we can generate ember-data. The purpose of ember-data is that it integrates library with ember.js to make ease of use to get records from the cache, server, new records creation in the client, server updates to save.

What is controller in ember.js ?

There are three kinds of controllers you can characterize:

• Controller: "No Instances of a Model":: entirely to manage restricting properties and state in a simple route between the view and the controller.
• ObjectController: "One Instance of a Model":: Plans to be populated by a solitary model, which is accessible by means of {{this}} in formats for showing content.
• ArrayController: "Numerous Instances of like Models":: Expects a variety of items as it's supporting model, accessible as in a question controller. Uncommon alternate ways exist for repeating through the exhibit's supporting setting, for example, {{#each}}.

What is serializer?

Converting the state information of an object instance to a binary or text form to continue to store intermediate or carried over a network is called serializer.

How to define new ember class ?

Syntax::  extend() method

How to create an ember handlebars template ?

To get started, let's generate a helper for rent-proto-type:

Ember g helper rent-proto-type

It creates two files, helper & related test::

installing helper

create app/helper/rent-proto-type.js

installing helper-test

create tests/unit/helpers/rent-proto-type-test.js

Our new helpers start with some boilerplate code from the generator:

app/helpers/rent-proto-type.js

import ember from ‘ember’;

Export function rentProtoType(params/*, hash*/){

Return params;

}

Export default ember.helper.helper(rentProtoType);

Update our rental-listing template to use our helper & pass in rental type:

app/templates/components/rental-listing.hbs

<article class="listing">

  <a {{action 'toggleImageSize'}} class="image {{if isWide "wide"}}">

    <img src="{{rent.image}}" alt="">

    <small>View Larger</small>

  </a>

  <h3>{{rental.title}}</h3>

  <div class="detail owner">

    <span>Owner:</span> {{rental.owner}}

  </div>

  <div class="detail type">

    <span>Type:</span> {{rental.type}}

    <span>Type:</span> {{rent-proto-type rental.type}} - {{rental.type}}

  </div>

  <div class="detail location">

    <span>Location:</span> {{rental.city}}

  </div>

  <div class="detail bedrooms">

    <span>Number of bedrooms:</span> {{rental.bedrooms}}

  </div>

</article>

app/helpers/rental-property-type.js

import Ember from 'ember';

const communityProtoTypes = [

  'Direct',

  'Cheque',

  'Cash'

];

export function rentProtoType([type]) {

  if (communityProtoTypes.includes(type)) {

    return 'Community';

  }
  return 'Standalone';
}

export default Ember.Helper.helper(rentalProtoType);

How to create instances in ember.js?

Syntax:: create() method

What controller does in ember.js ?

It can be defined in 2 ways -

• The model returned by the route is decorated by controller.
• User performance actions is listened by controller.

Difference between router & route in ember.js ?

• Router: The connecting point between our application and address bar. It simply translates into route.
• Route: User request will land later it was translated by router & it decides to provide what data should be provided to the template.

What is model in Ember.js ?

Model defines the functionality class of the ember data. In ember.js , each of the route has a associated model. Ember data covers data stored in the server & also works easy with streaming API’s like firebase/websockets, socket.io.

What controller does in Ember.js?

Decorate the model returned by the route. It can listen to actions performed by users.

Role of the adapter?

Adapter queries in the backend. Each of the adapter is made with particular backend.