Backbone JS
Backbone JS
js
-----------------------
What is the significance of Edge Version of BackboneJS? - all
BackboneJS is a lightweight JS library that lets you build and structure the server
side applications by separating business and UI logic. - false
Which one is not a building block of BackboneJS? - controller
_ created BackboneJS and was initially released on - Jeremy Ashkenas, October 13th,
2010.
BackboneJS is based on __________________ architecture. - MVC
-----------------------------
The BackboneJS separates ____________ and ______________. - business logic, user
interface logic.
What is the core part of any JavaScript application that retrieves and populates
the data? - Model
View holds HTML markup for the application. - False
What is used to send an HTTP request to the View? - Router
The _________ binds and triggers the user's custom events to an application -
events
---------------------------
What is view in Backbone.js? - all
In Backbone View, what is the use of setElement? - Used when Backbone view has to
be applied to a different DOM element.
How can we get the Attribute value of a Model? - Using .get() method
---------------------------
_ are the array of models that are created inside the collection. - Models
How to extend an object called testObj from Backbone.Event? - _.extend(testObj,
Backbone.Events);
How to override the model property of the collection class? -
Backbone.Collection.model
How to invoke the declared event in BackboneJS? - Using trigger() function
What is the only method available in the Backbone.js history? - start
-----------------------------
BackboneJS can be included in project by - all
Which of the following is correct syntax for reading attributes from Model object?
- objBook.get('title');
Var Book=Backbone.Model.extend({title:'XXX'});
var objBook = new Book();
View in BackbonJs can be considered as a kind of controller. - true
What is el Property of Backbone.js View? - all
_ is the first function called when the view is instantiated. - initialize
The Function escape gets the current value of an attribute from the model and
returns the HTML-escaped version of a model’s attribute. - true
BackboneJS has a soft dependency with ____________ and a hard dependency with _ -
not Underscore.js, jQuery.
What is not an alternative to Backbone.js? - Java
The _____________ method in view is used to encapsulate the logic required to
render HTML - .render()
Which of the following is correct syntax for creating Backbone Collection with
Model Model? - var Library=Backbone.Collection.extend({model:Book});
In which language, backbone JS is written? - JavaScript
-----------------------------
Try it Out - Bind Your View To Model
//Write your code here
var Product = Backbone.Model.extend({});
var product = new Product({ product_id: "XXX01", name: "XXXXX", description:
"XXXXXXXX", price: "100/-" });
}
});
-------------------------
Try it Out - a Simple DOM Manipulation Program
// Create your view myView here
var myView = Backbone.View.extend({
el: "#myParagraph",
initialize: function() {
this.$el.html("Views are Awesome Component in BackboneJS");
}
});
------------------------
Try it Out - a Model for Employee
// JavaScript
var Employee = Backbone.Model.extend({
// add initiate method with specified alert message
//add default values to the Employee Model
defaults : {
employee_id:12345,
name:'John Doe',
year_of_joining:2014,
address:'ABC Street'
}
});
var employee = new Employee();
-----------------------
// JavaScript
var Employee = Backbone.Model.extend({
defaults : {
employee_id:1111,
name:'Sarah Roe',
year_of_joining:1999,
address:'ABC Street',
experience:19},
getExperience: function(inYear) {
if(inYear == 1999) {
this.set({'experience':19});
return 19;
} else {
return 8;
}
}
});
--------------------------
Try it Out - Events for Increment and Decrement
// JavaScript
var AppView = Backbone.View.extend ({
//Write your code here
initialize : function() {
$('#no_of_products').text(10);
},
addOne: function(){
var num = this.model.get('no_of_products');
console.log(num + " *******************");
num++;
console.log(num + " ++++++++++++++++++++");
this.model.set({"no_of_products": num});
$('#no_of_products').text(num);
},
minusOne: function(){
var num = this.model.get('no_of_products');
num--;
this.model.set({"no_of_products": num});
$('#no_of_products').text(num);
}
});
var appView = new AppView();
----------------------------
Try it Out - Todo List Application
//Define a global var task_id as 0
var task_id = -1;
});
taskCollection.on('add', function () {
tasksView.render();
});
taskCollection.on('remove', function () {
tasksView.render();
});