The Knowledge Foundation

Wednesday, 13 June 2018

019 BackboneJS Backbone.Router extend,initialize,navigate,execute

Router

Web page generally contain linkable, bookmarkable, shareable URLs for important locations.Router methods work for routing client-side pages and connecting them to actions and events.Backbone.Router also enabled history capabilities.You need to call Backbone.history.start() or Backbone.history.start({pushState: true}) after the application has finished creating router.

The following is the lists of methods which can be used for Router.

extend : It is used to extend the backbone router class.It helps to
create a custom router class.Backbone.Router actually create a new constructor that inherits from the Backbone.Router.

Syntax : Backbone.Router.extend(properties, [classProperties])

Example

var Router = Backbone.Router.extend({

routes: {

//Your custom logig

execute: function (callback, args)

{

//Your custom logig

}

});

Backbone.history.start();

</script>

routes : Routes method define URL representation of application objects on routers.
Syntax : router.routes

constructor / initialize :It creates a new constructor for the router object instantiation.

Syntex : new Router([options])

Example

//Rounter extend

var Router = Backbone.Router.extend({

routes: {

//Your custom logig

execute: function (callback, args)

{

//Your custom logig

}

});

//instance creation

var appRouter=new Router();

Backbone.history.start();

</script>


route :

create a route for the router.

Syntax : router.route(route, name, [callback])

Example of extend/constructor/routes

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

var Router = Backbone.Router.extend({

routes: {

'': 'Router1',

'Router2': 'Router2'

Router1: function(){

document.write("Your Custom logic no 1 called.");

Router2: function(){

document.write("Your Custom logic no 2 called.");

});

var appRouter=new Router();

Backbone.history.start();

</script>

</head>

<body>

Output :
Your Custom logic no 1 called.



navigate :

If we want to save our application as a URL, we call navigate to update.

Syntax : router.navigate(fragment, [options])

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

type="text/javascript"></script>

type="text/javascript"></script>

var App = Backbone.Router.extend({

routes: {

"": "index",

"item": "GoSearch"

index: function () {

document.write('You are in the home page.');

GoSearch: function () {

app.navigate("www.google.com", { trigger: true });

}

});

app = new App();

Backbone.history.start();

</script>

</head>

Output :
You are in the home page.


execute :

router.execute is called internally within the router, its corresponding callback is executed whenever a route is matched.

Syntax : router.execute(callback, args)

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

type="text/javascript"></script>

type="text/javascript"></script>

var Route1 = Backbone.View.extend({

initialize: function () {

this.execute();

execute: function () {

return this.template;

}

});

var App = Backbone.Router.extend({

routes: {

"": "index",

"item": "GoSearch"

index: function () {

document.write('You are in the home page.');

GoSearch: function () {

app.navigate("www.google.com", { trigger: true });

var route1 = new Route1();

alert(route1.execute());

}

});

app = new App();

Backbone.history.start();

</script>

<a href = "#item">route1</a>

</div>

</head>

Output :

018 BackboneJS Collection parse,clone,fetch,create

parse : This method returns the collection's data data by passing through the response object and represents the data in JSON format.

Syntax : collection.parse(response, options)

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

var myData = {

"values": [{

"name": "john",

"age": "12"

}]

};

var student = Backbone.Collection.extend({

model: myData,

parse: function (response, options)

{

document.write(JSON.stringify(response));

}

});

var stuObj = new student(myData, { parse: true });

</script>

</head>

</html>

Output :

{"values":[{"name":"john","age":"12"}]}

clone : Returns a new instance of the collection just coping one collection to another object.

Syntax : collection.clone()

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

type="text/javascript"></script>

var obj1 = Backbone.Model.extend({

defaults:

{

}

});

var objCollcetion = Backbone.Collection.extend({ model: obj1 });

var obj2 = new obj1({ name: "john2", class: "3" });

var obj3 = new obj1({ name: "john3", class: "4" });

var objCollcetion = new objCollcetion();

objCollcetion.add([obj2, obj3]);

var clonedCollection = objCollcetion.clone();

document.write("The new instance of collection is: ", JSON.stringify(clonedCollection));

</script>

</head>

</html>

Output :
The new instance of collection is: [{"name":"john2","class":"3"},{"name":"john3","class":"4"}]

fetch :fetch method , fetch default set of model in the collection and communicate the sync method.

Syntax : collection.fetch(options)

Example

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

type="text/javascript"></script>

var obj1 = Backbone.Model.extend({

defaults:

{

}

});

var objCollcetion = Backbone.Collection.extend({ model: obj1 });

var objCollcetion = new objCollcetion();

objCollcetion.url = '/accounts';

Backbone.sync = function (method, model) {

document.write(method + ": " + model.url);

};

objCollcetion.fetch();

</script>

</head>

</html>

Output :
read: /accounts

create : Create method is used to create a new instance of the model in the collection.

Syntax : collection.create(attributes, [options])

<!DOCTYPE html>

<html>

<head>

type="text/javascript"></script>

type="text/javascript"></script>

var obj1 = Backbone.Model.extend({

defaults:

{

}

});

var objCollcetion = Backbone.Collection.extend({ model: obj1 });

var objCollcetion = new objCollcetion();

Backbone.sync = function (method, model) {

document.write(JSON.stringify(model));

};

var othello = objCollcetion.create({

});

</script>

</head>

</html>

Output :
{"name":"john2","class":"27"}

The Knowledge Foundation

Wednesday, 13 June 2018

019 BackboneJS Backbone.Router extend,initialize,navigate,execute

018 BackboneJS Collection parse,clone,fetch,create

Python Tutorial : Loop

Labels

Report Abuse