Skip to main content

BackboneJs Interview Questions and Answers

What Is Backbone.js?
The Backbone.js is a JavaScript framework which facilitates us to organize your code and make it easier to develop single page applications and reduce the development time.

It is font-end framework and also allows us to structure JavaScript code in MVC (Model, View, and Controller) architecture.

It is developed by Jeremy Ashkenas, DocumentCloud Inc.
ü  Initial release  - October 13, 2010; 7 years ago
ü  Stable release - 1.3.3 / April 5, 2016; 22 months ago

It is designed for developing SPA (single-page applications) and organizes way and reduces the development time by providing lots of inbuilt functions.

It is a data binding frameworks and provides functionality to access database and manipulates data.

Backbone.js follows Model-View- Controller (MVC) architecture.
ü  Model - It is a part of your code that populates and retrieves the data
ü  View - It is the HTML representation of this model
ü  Controller - It enables you to save your JavaScript application via a hash bang URL

What Are the Architecture of Backbone.js?
What Are the Initial Setup Steps of backbone.js?
ü  Save a reference to the global object
ü  Create a local reference to slice or splice
ü  Save the previous value of the Backbone variable, so that it can be restored later on, if noConflict is used
ü  Current version of the library, Keep in sync with package.json
ü  Require Underscore, if we are on the server, and it’s not already present
ü  Set the JavaScript library that will be used for DOM manipulation and Ajax calls
ü  Returns a reference to this Backbone object
ü  Turn on emulateHTTP to support legacy HTTP servers
ü  Turn on emulateJSON to support legacy servers that can't deal with direct application/json requests

Why you use backbone.js, not other frameworks?
ü  It's smaller
ü  Backbone is a library, not a framework, and plays well with others
ü  Supports to Two-way data-binding
ü  Its major focus on helpful methods to manipulate and query your data not HTML widgets
ü  Backbone does not force you to use a single template engine.
ü  Supports to synchronous events

What Are the main components of backbone.js?
The main components are –
ü  Model
ü  View
ü  Router
ü  Event class object

Model - A Model manages an internal table of data attributes and triggers events when any of data is modified.
View - A View a JavaScript object that manages specific DOM elements
Router - Backbone Router is used for routing client-side applications and connects them to actions and events using URLs. Backbone.Router is used to create a Router with Backbone.
Event class object - Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.

In which language, backbone Js is written?
The backbone.js is written in JavaScript language.

What Are the Advantages of backbone.js?
ü  Provides minimal set of data structure
ü  API with tons of functions
ü  API connection over a RESTful JSON interface
ü  Provides a way to manage and organize code
ü  Robust event handling
ü  Views and URL are user interface which are capable of binding to model and event
ü  BackboneJs provides the large scale application

What Are the disadvantages of backbone.js?
ü  Application models do not change very often
ü  Application pages are frequently refreshed from scratch from the server
ü  Between different view models are not shared

What Are the configuration options available in backbone.js?
ü  InitialCopyDirection
ü  modelSetOptions
ü  Change Triggers
ü  boundAttribute
ü  suppressThrows
ü  converter

What is Model in Backbone.js?
The Models are used to represent s the data from your server and its contains the -
ü  Interactive data
ü  Conversions
ü  Validations
ü  Computed properties
ü  Access control
ü  Business Logic

What is ModelBinder in Backbone.js?
The ModelBinder class is used to make synchronization process of views and models together and It is ModelBinder most powerful and useful capability of ModelBinder class.

What Is Events in backbone.js?
A backbone event is a module that can be mixed into any object, giving the object the ability to bind and trigger custom named events. Events are not declared before they are bound to any object. 

Events reflect the state of the model.

What Is Router in backbone.js?
Backbone Router is used for routing client-side applications and connects them to actions and events using URLs. Backbone.Router is used to create a Router with Backbone.

What Is collection in Backbone.js?
A collection is a group of models, handling the loading which binds events when the model has been modified in the collection.

It is also supports sorting, filtering and saving of new models to the server.
Example looks like -
var UserModel = Backbone.Model.extend({
  initialize: function(){
      console.log("Hey, I am Anil Singh!");

var UsersCollection = Backbone.Collection.extend({
  model: User

What Are the Dependencies of backbone.js?
What Are the three JS files that are required to setup a working environment for Backbone.js?
There are three Dependencies in BackboneJs files to setup a working environment for Backbone.js
ü  Underscore.js - It used for RESTful persistence and DOM manipulation.
ü  jQuery
ü  json2.js
In your application put these files within js folder and use it in your index.html page.

What Is the use of backbone.js setElement?
The BackboneJs setElement function is used when Backbone view has to be applied to a different DOM element.

What Is the function of toJSON?
The toJSON function is used for persistence, serialization and for augmentation before being sent to the server.

What Is view in Backbone.js?
ü  The View is a JavaScript object that manages specific DOM elements
ü  Views are not HTML
ü  View is a description of a model
ü  The HTML code comes from templates
ü  View can work with any template system

What Is Unbinding function in Backbone.js?
The Unbinding function is used to remove the validation binding on the model and removing all events hooked up on the collection.
Its looks like -
Backbone.Validation.Unbind (view)

How to Create a Model in backbone.js?
Creating a Model in BackboneJs and its looks like -
Users = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome You, Anil!");
var person = new Users;

How to access a models data from a view in Backbone.js?
In order to access a models data from a view in backbone.js you have to initialize your Model and it looks like -
var bookAuthor= Backbone.Model.extend({
  initialize: function(){
    console.log('intailized method called!');

var person_view = Backbone.View.extend({
  initialize: function() {
      this.model = new bookAuthor();
  output: function(){

How To Use to Backbone.Sync function?
The Backbone.sync is a function that is BackboneJs call every time it attempts to read or save a model to the server. By default, it uses jQuery.ajax to make a RESTful JSON request and returns a jqXHR.

The method signature of Backbone.sync is sync (method, model, [options])
ü  Method – It is CRUD methods like create, read, update and delete
ü  Model – The model to be saved
ü  Options – It is a success and error callback

The default sync handler maps CRUD to REST like -
ü  Create - POST   /collection
ü  Read - GET   /collection[/id]
ü  Update - PUT   /collection/id
ü  Patch - PATCH   /collection/id
ü  Delete - DELETE   /collection/id
The Example looks like -
Backbone.sync = function(method, model) {
  model.set('id', 786);

var author= new Backbone.Model({
  author: "Anil Singh",
  website: ""
});;{author: "Reena Singh"});

How To Use to Backbone.ajax function?
If you want to use your custom AJAX function, you must to do by setting the Backbone.ajax and doesn't support the jQuery.ajax.

Syntax -
Backbone.ajax = function(request) { ... };

What Are Events Types?
There are following events are available in -
ü  on - Used to bind a callback function to an object
ü  off - Used to Remove a previously-bound callback function from an object.
ü  Trigger - Used to Trigger callbacks for the given event
ü  once - It is very similar to On but only difference that is - bound callback to fire only once before being removed.
ü  listenTo - Tell an object to listen to a particular event on another object
ü  stopListening - Tell an object to stop listening to events
ü  listenToOnce - It is very similar to listenTo but bound callback to fire only once before being removed.

What Are the difference between id and cid?
The id ( is a special property of models, arbitrary string and integer.
The cid (model.cid) is a special property of models, unique identifier automatically assigned to all models when they're first created.

What Are the difference between idAttribute and attributes?
The idAttribute (model.idAttribute) is model's unique identifier is stored under the id attribute.
The attributes property is the internal hash containing the model's state.

What Are the difference between Backbone.noConflict and Backbone.$ ?
Backbone.noConflict -
The Backbone.noConflict function is used to displays the original value of Backbone object and also allows us to store reference to a backbone.

Its looks like -
var noConflict = Backbone.noConflict();

Backbone.$ -
If you have multiple copies of jQuery on the page, or simply want to tell Backbone to use a particular object as its DOM / Ajax library, this is the property for you.

Its looks like -
Backbone.$ = require('jquery');

How does backbone.js relate to MVC?
The BackboneJs contains the pieces -
ü  Backbone.Model – Like a Rails model minus the class methods. Wraps a row of data in business logic
ü  Backbone.Collection – A group of models on the client-side, with sorting/filtering/aggregation logic
ü  Backbone.Router – Rails routes.rb + Rails controller actions. Maps URLs to functions
ü  Backbone.View – A logical, re-usable piece of UI.

I hope you are enjoying with this post! Please share with you friends. Thank you so much!
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

AngularJs input date format calendar

Table of Context bout  the input date.  Click for live demo on plnker 1. Allow to use of a custom date format like "yyyy/MM/dd" or "yyyy-MM-dd" etc. 2. Allow to check the input date typed by the user is correct or not. 1 2 3 4 //The model must be a Date object, otherwise Angular will throw an error. //The error is Invalid Date objects will be rendered as an empty string. i.e. The dates whose getTime() is NaN. //The model must be a Date object, otherwise Angular will throw an error. //The error is Invalid Date objects will be rendered as an empty string. i.e. The dates whose getTime() is NaN. The Example 1 code as given below. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 <!doctype html> <html lang= "en" > <head>      <meta charset= "utf-8" />      <script src= "

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from '