Google News
logo
Ember.js Interview Questions
The architectural structure of the Ember.js application is based on MVC (Model, View, Controller) pattern.
 
Models : Models define the data that is used in an application.

Controllers : Controllers are used to modifying the queries, edit the data and provide user interactions.

Views : Views are used to display the data and capture the user actions to be repeated easily if needed in the future.
In Ember.js, instead of majority of your application’s logic living on the server, an ember.js application downloads everything it required to run in the initial page load. So user does not have to load a new page while using the app and UI will responds quickly. The advantage of this architecture is that your web application uses the same REST API as your native App.
First way :
* By extending the Em.View class, you have to create an oject in your JavaScript to define a view. You can declare your functions and variables inside that.
* Now to insert a view in your template,  you have to follow the write the handlebar script {{ #view App.ViewName}}
 
Second Way :
* In this technique, the name of the view object is not required, while inserting into the template. But inside the object you have another property called as templateName which should be initialized with the value same as data template name attribute in handlebar’s script tag, in your template.
The prime role of an adapter is to handle queries related to the task assigned to it. There are different adapters that can be assigned different tasks. It can also query the back as well as the front end. The common adapters in Ember.js are Rest, JSON, LS Adapter, and the latter deals with local storage or when data needs to be stored in low. 
In Ember.js, we can call the extend() method on Ember.Object to define a new ember class.
 
Example :
App.Person = Ember.Object.extend({  
  say: function(thing) {  
    alert(thing);  
  }  
});  
The above example defines a new App.Person class with a say() method.
 
We can also create a subclass from any existing class by calling its extend() method. See the following example if you want to create a subclass of Ember's built-in Ember.View class.
 
Example :
App.PersonView = Ember.View.extend({  
  tagName: 'li',  
  classNameBindings: ['isAdministrator']  
}); 
While defining a subclass, you can override methods but still access the implementation of your parent class by calling the special _super() method.
 
Example :
App.Person = Ember.Object.extend({  
  say: function(thing) {  
    var name = this.get('name');  
    alert(name + " says: " + thing);  
  }  
});  
AppApp.Soldier = App.Person.extend({  
  say: function(thing) {  
    this._super(thing + ", sir!");  
  }  
});  
var sam = App.Soldier.create({  
  name: "Free Time Leaarn"  
});  
sam.say("Reporting"); // alerts "Free Time Leaarn says: Reporting, sir!"  
In Ember.js, a service is a long-lived Ember object that can be available in different parts of your application. The following syntax is used to create the Ember.js service.
 
Syntax :
"ember. Service"​
Following is a list of some examples of Ember.js services :
 
* Logging
* User/session authentication
* Geolocation
* Third-party API's
* Web Sockets
* Server sent events or notifications
* Server-backed API calls that may not fit ember-data etc.

Ember CLI service generator is used to generate the service. To get access to a service, inject it either in an initializer or use the following syntax :
"ember.Inject"  
By using this method, you can also access the properties and methods using services.
 
Use the following syntax to define a service.
 
Syntax :
ember generate service service_name;  
Component templates can leave one or more placeholders that users can fill with their own HTML. These are called blocks. Here's an example that provides a component with the implicit default block.
<ExampleComponent>
  This is the default <b>block content</b> that will
  replace `{{yield}}` (or `{{yield to="default"}}`)
  in the `ExampleComponent` template.
</ExampleComponent>
This is equivalent to explicitly naming the default block using the named block syntax.
<ExampleComponent>
  <:default>
    This is the default <b>block content</b> that will
    replace `{{yield}}` (or `{{yield to="default"}}`)
    in the `ExampleComponent` template.
  </:default>
</ExampleComponent>
Through Block Content, users of the component can add additional styling and behavior by using HTML, modifiers, and other components within the block.
Helper functions are JavaScript functions that you can call from your template.
 
Ember's template syntax limits what you can express to keep the structure of your application clear at a glance. When you need to compute something using JavaScript, you can use helper functions. It's possible to create your own helpers or just use the built-in ones.
 
For instance, let's take a look at a generic message component from a messaging app.
 
app/components/message.hbs :
<Message::Avatar
  @title={{@avatarTitle}}
  @initial={{@avatarInitial}}
  @isActive={{@userIsActive}}
  class={{if @isCurrentUser "current-user"}}
/>
<section>
  <Message::Username
    @name={{@username}}
    @localTime={{@userLocalTime}}
  />

  {{yield}}
</section>
<Message
  @username="Tomster"
  @userIsActive={{true}}
  @userLocalTime="4:56pm"
  @avatarTitle="Tomster's avatar"
  @avatarInitial="T"
>
  <p>
    Hey Zoey, have you had a chance to look at the EmberConf
    brainstorming doc I sent you?
  </p>
</Message>
By looking at how we use the <Message> component, we can see that some of the arguments are fairly repetitive. Both @avatarTitle and @avatarInitial are based on the user's @username, but the title has more text, and the initial is only the first letter of the name. We'd rather just pass a username to the <Message> component and compute the value of the title and initial.
 
Let's update the component to do that. It'll take a @username argument and calculate the title and initial.
Helpers can also be defined using class syntax. For instance, we could define the substring helper using classes instead.
 
app/helpers/substring.js :
import { helper } from '@ember/component/helper';
import Helper from '@ember/component/helper';

function substring([string], { start, length }) {
export default class Substring extends Helper {
  compute([string], { start, end }) {
    return string.substring(start || 0, end);
  }
}
Class helpers are useful when the helper logic is fairly complicated, requires fine-grained control of the helper lifecycle, or is stateful (we'll be discussing state in the next chapter).
Ember provides 2 components for building a form :
 
* <Input>
* <Textarea>

These components are similar in HTML markup to the native <input> or <textarea> elements. In contrast to the native elements, <Input> and <Textarea> automatically update the state of their bound values.
 
<Input> : We mentioned that the built-in components are similar in HTML markup to their native counterparts.
 
Consider the following example in a template file.
<label for="user-question">Ask a question about Ember:</label>
<Input
  id="user-question"
  @type="text"
  @value="How do text fields work?"
/>
 
<Textarea> : The following example shows how to bind this.userComment to a text area's value.
<label for="user-comment">Comment:</label>
<Textarea
  id="user-comment"
  @value={{this.userComment}}
  rows="6"
  cols="80"
/>
Setting attributes on <Textarea> : With the exception of @value argument, you can use any attribute that <textarea> natively supports.