The Knowledge Foundation

Thursday, 14 June 2018

022 BackboneJS Sync

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>

Wednesday, 13 June 2018

020 BackboneJS View extend,initialize,$el,Attributes

BackboneJS View

The Backbone.js view is how your data looks like.View represent model and collcetion to the user.BackboneJS organize your interface into logical views, backed by models, each will updated independently when model changes and collection changes without having to redraw the page.View handle users input events, bind events with methods.

Following of methods that can be used to manipulate the Backbone.js views.

extend : It is used to creating a custom view class. You can to override existing the render function.

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

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

var Route1 = Backbone.View.extend({

initialize: function () {

document.write('I am learing BackboneJS');

}

});

var app = new Route1();

</script>

</head>

Output :

I am learing BackboneJS

constructor / initialize : Constructor is called when the view instance created."new" keyword is used for instance creation.

Syntax : new View([options])

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

var Route1 = Backbone.View.extend({

initialize: function () {

document.write('I am learing BackboneJS');

}

});

var app = new Route1();

</script>

</head>

Output :

I am learing BackboneJS

el : Any views have a DOM element .BackboneJS el method defines the element that is used as the view reference.el created from the view's tagName, className, id and attributes properties, if specified.

Syntax : view.el

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

var Route1 = Backbone.View.extend({

initialize: function () {

document.write('I am learing BackboneJS');

}

});

var app = new Route1({ el: $("myapp") });

</script>

</head>

Output :

I am learing BackboneJS

$el : $el method specifies a cached jQuery object for a view.

Syntax : view.$el()

Attributes : There are hash attributes that will be set as HTML DOM element attributes on the view el(id, class, data-properties).

Syntax : view.attributes

Example

<!DOCTYPE html>

<head>

<title>Router Extend Example</title>

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

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

student = Backbone.Model.extend

({

defaults:

{

}

});

var ViewDemo = Backbone.View.extend ({

initialize: function ()

{

document.write("The site is: ",this.model.get("name")+"
");

document.write("The site is: ",this.model.get("class")+"
");

}

});

var StuObj = new student({ name: "John", class: "12" });

var myview = new ViewDemo({ model: StuObj });

</script>

</head>

Output :

The site is: John
The site is: 12

The Knowledge Foundation

Thursday, 14 June 2018

022 BackboneJS Sync

021 BackboneJS History

Wednesday, 13 June 2018

020 BackboneJS View extend,initialize,$el,Attributes

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

Labels

Report Abuse