0% found this document useful (1 vote)
167 views4 pages

Backbone JS

Backbone.js is a lightweight JavaScript library that uses the MVC architecture to structure client-side applications. It separates business logic and user interface logic. The core parts are the Model, which retrieves and populates data, the View, which contains HTML markup, and the Router, which handles user interactions and application state. The events object binds and triggers custom events. Views can be bound to models so that changes to the model trigger re-rendering of the view. Collections are arrays of models that can be manipulated as a group.

Uploaded by

Shantha Moorthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (1 vote)
167 views4 pages

Backbone JS

Backbone.js is a lightweight JavaScript library that uses the MVC architecture to structure client-side applications. It separates business logic and user interface logic. The core parts are the Model, which retrieves and populates data, the View, which contains HTML markup, and the Router, which handles user interactions and application state. The events object binds and triggers custom events. Views can be bound to models so that changes to the model trigger re-rendering of the view. Collections are arrays of models that can be manipulated as a group.

Uploaded by

Shantha Moorthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Backbone.

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/-" });

var ProductView = Backbone.View.extend({


el: "#app",
initialize: function() {
this.model.on("change", this.render);
},
render: function() {
this.$el.html(this.model.get("product_id"));
return this;
}
})
---------------------------
Try it Out - Trigger a Click Event
//Create your View AppView here with click event using alertMe function
var AppView = Backbone.View.extend({
el: "#app",
alertMe: function() {

}
});
-------------------------
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;

//Define your Model, Task Model


var Task = Backbone.Model.extend({
defaults: {
taskid:0,
task_name:"",
task_desc:""
}
});

//Define your Collection, TasksCollection with Model as Task


var TasksCollection = Backbone.Collection.extend({
model: Task,
initialize: function () {
// This will be called when an item is added. pushed or unshifted
this.on('add', function(model) {
console.log('something got added');
});
// This will be called when an item is removed, popped or shifted
this.on('remove', function(model) {
console.log('something got removed');
});
// This will be called when an item is updated
this.on('change', function(model) {
console.log('something got changed');
});
}
});

//Define your View, TaskRecordsView with events buttons


add(addTask),delete(deleteTask) and clear(clearInput)
var TaskRecordsView = Backbone.View.extend({
e1:"#todoapp",
addTask : function() {
taskCollection.add(new Task());
if(task_id >= 2) {
task_id = 1;
}
task_id++;
return task_id;
},
deleteTask : function() {
task_id--;
},
clearInput : function() {
$('#task_name').text('');
$('#task_desc').text('');
$('#task_name').val('');
}

});

var taskCollection = new TasksCollection();


var tasksView = new TaskRecordsView({
collection:taskCollection
});

taskCollection.on('add', function () {
tasksView.render();
});
taskCollection.on('remove', function () {
tasksView.render();
});

You might also like