<script type="text/javascript">
//The model 'MyTeam' includes default values and extended using the Backbone.Model class
var MyTeam = Backbone.Model.extend({
defaults: {
player: "Dhyanchand",
country: "India"
},
});
//'MyTeam1' is an instance of the collection
var MyTeam1 = Backbone.Collection.extend({
model: MyTeam //model 'MyTeam' is specified for a collection by overriding the 'model' property
});
//The collection 'MyTeam1' is instantiated by using new keyword
var myval=new MyTeam1({});
//The JSON.stringify() method returns values of collection in the JSON format
document.write("The values in the collection are: ",JSON.stringify(myval));
</script>
js files that we require to setup Backbone.js and make a working environment :index.html page.<script type="text/javascript">
var RouteMenu = Backbone.View.extend({
el: '#routemenu', //'el' defines which element to be used as the view reference
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
}
});
var Router = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
},
});
var routemenu = new RouteMenu();
Backbone.history.start();
</script>
Backbone.js utility :Backbone.noConflict : It returns the Backbone objects to its original value and provides a facility to store the reference to a backbone. It can be used to embed the backbone on third-party websites, where you don't want to thrash the existing backbone.Backbone.$ : This property is used when you have multiple copies of jQuery on the page or want to tell Backbone to use a particular object as its DOM / Ajax library.Backbone.Validation.Unbind(view) [ This will remove the validation binding]listener.listenTo(object, event, callback)
object.on(event, callback) listenTo()", the object whose events you want to listen to is passed as the first argument. On the other hand, in the case of "on()", it is a method on that object.listenTo()" over "on()" are :Backbone.js, by default, collections are not explicitly sorted. We can sort the collections by defining a comparator on the collection object. By defining a comparator, a collection is sorted whenever a model is added or the "sort()" method is invoked on a collection :var Fruits = Backbone.Collection.extend({
comparator: function(a, b) { /* .. */ }
})
// Or
var Fruits = Backbone.Collection.extend({})
var fruits = new Fruits()
fruits.comparator = function(a, b) { /* .. */ } sort"), or a string identifying the attribute by name to sort on.Backbone.sync is a function that is Backbone js 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 jqXHRBackbone.sync = function(method, model) {
alert(method + ": " + JSON.stringify(model));
model.set('id', 1);
};
var author= new Backbone.Model({
author: "Sharad",
website: "https://www.freetimelearning.com"
});
author.save();
author.save({author: "FTL"});
Backbone. Sync () :Create → POST /collectionRead → GET /collection [/id]Update → PUT /collection/idPatch → PATCH /collection/idDelete → DELETE /collection/idfetch (), save (), and destroy (), you can override Backbone.sync on a per model basis to accomodate custom endpoints and HTTP verbs.Backbone.js has a hard dependency with underscore.js, making it more functional and providing support for a range of useful collection-based operations.Backbone.js has a soft dependency on jQuery.Backbone.js is based on MVC architecture. When the model changes, it can update the HTML of your application automatically.Backbone.js uses a client-side rendering framework or Javascript templating to render HTML, enabling you not to embed HTML code inside JavaScript code.Backbone.js offers a significantly clean and elegant way for UI updates and DOM manipulations.el" property of a view directly because when you attempt to change the "el" property directly, it may lead to inconsistent behavior from the Backbone.js view. The reason behind this inconsistent behavior is that when you change the "el" property directly, it doesn't automatically update the cached jQuery object property corresponding to it, which is "$el".setElement()" on the view.view.setElement(otherElement) change" event. However, the object fires another event with a name specific to the change attribute : "change:[attribute]".var Fruit = Backbone.Model.extend({})
var fruit = new Fruit({
weight: 3.25
})
fruit.on('change:weight, function() {
// Event "change:weight" will fire whenever the weight attribute of fruit changes.
})​
Backbone.js, the model.cid is a special property of models, the cid or client id, which is automatically assigned to all models when they are first created. The model.cid works as a unique identifier. This is very useful when the model is not saved to the server, but you want to show it on the UI. model.attributes <script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
person.set({ name: "Chanti"});
document.write(person.get('name'));
</script>