The Knowledge Foundation : BackboneJS

026 BackboneJS Backbone.noConflict

Backbone.noConflict

Get the Backbone object back to its original value.

Syntax : var backbone = Backbone.noConflict()

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

Backbone.emulateHTTP = true;

Backbone.sync = function (method, model)

{

document.write(method + ": " + JSON.stringify(model) + "");

model.set('id', 1);

};

var student = new Backbone.Model

({

});

student.save();

student.set({ name: "john2" });

student.save();

student.destroy();

var noConflikObj = Backbone.noConflict();

document.write(noConflikObj.VERSION + "");

</script>

Output :

create: {"name":"john","class":4}
update: {"name":"john2","class":4,"id":1}
delete: {"name":"john2","class":4,"id":1}
1.1.2

024 BackboneJS Backbone.emulateHTTP

Backbone.emulateHTTP

If you server does not support REST/HTTP , your server is legacy , then you must use Backbone.emulateHTTP = true

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

Backbone.emulateHTTP = true;

Backbone.sync = function (method, model)

{

document.write(method + ": " + JSON.stringify(model) + "");

model.set('id', 1);

};

var student = new Backbone.Model

({

});

student.save();

student.set({ name: "john2" });

student.save();

student.destroy();

</script>

Output :

create: {"name":"john","class":4}
update: {"name":"john2","class":4,"id":1}
delete: {"name":"john2","class":4,"id":1}

023 BackboneJS Backbone.ajax

Backbone.ajax

You can use a custom AJAX function, if your endpoint do not support the jQuery.ajax API.

Example :

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

Backbone.ajax({

dataType: "jsonp",

url: "https://mysite.com/abcd.html?id=2",

data: "",

success: function (val) {

var myModel = new Backbone.Model

({

});

var myCollection = Backbone.Collection.extend({

model: myModel

});

collection = new myCollection(val);

}

});

</script>

Backbone.Sync

Backbone.js Sync is a function that it is called every time, it attempts to read or save a model to the server.It persists the state of the model to the server.

The method signature of Backbone.sync is

    method – The CRUD method ("create", "read", "update", or "delete")

    model – The model to be saved (or collection to be read)

    options – Success and error callbacks.

Example (Create)

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

Backbone.sync = function (method, model)

{

document.write(method + ": " + JSON.stringify(model) + "");

model.set('id', 1);

};

var student = new Backbone.Model

({

});

student.save();

student.destroy();

</script>

Output :

create: {"name":"john","class":4}
delete: {"name":"john","class":4,"id":1}

Example (Fetch)

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

Backbone.sync = function (method, model) {

document.write(method + ": " + JSON.stringify(model) + '');

model.set('id', 1);

};

var student = new Backbone.Model

({

});

student.fetch();

</script>

Output :

read: {"name":"john","class":4}

021 BackboneJS History

History

History like a global router , it keeps track of the history, matches the appropriate route, trigger callbacks and enables the routing in the application.

Javascript handle history object by creating pushState().But older browsers does not support pushState . BackboneJS smartly handle new and old browser.you can handle enable / diasbale pushState by pushState: true/false .

After routers is created, and all of the routes are set up properly
, Backbone.history.start() to begin monitoring change.

Syntax : Backbone.history.start([options])

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

</head>

var MyRoute = Backbone.Router.extend({

routes: {

"Item": "myItem"

myItem: function (myroute) {

document.write(myroute);

}

});

var rtObj = new MyRoute();

Backbone.history.start({ pushState: true });

</script>

<body>

<a href="#route1">Route1 </a><a href="#route2">Route2 </a><a href="#route3">Route3

</a>

</body>

The Knowledge Foundation

Thursday, 14 June 2018

026 BackboneJS Backbone.noConflict

024 BackboneJS Backbone.emulateHTTP

023 BackboneJS Backbone.ajax

022 BackboneJS Sync

021 BackboneJS History

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

Labels

Report Abuse