The Knowledge Foundation

Friday, 8 June 2018

006 BackboneJS Built-in Events add , remove

BackboneJS allows the use of global events where applicable in the application Below is the list of built-in Backbone events, with arguments.You can also trigger your own events on Models.

"add" (model, collection, options) — To add a model to a collection.

"remove" (model, collection, options) — To remove a model is removed from a collection.

"update" (collection, options) — An event triggered after models have been added or removed from a collection.

"reset" (collection, options) — Trigger if the collection's all contents have been reset.

"sort" (collection, options) — Trigger if collection has been re-sorted.

"change" (model, options) — Trigger if model's attributes have changed.

"change:[attribute]" (model, value, options) — Trigger if a specific attribute has been updated.

"destroy" (model, collection, options) — Trigger if model is destroyed.

"request" (model_or_collection, xhr, options) — Trigger if a model or collection has started a request to the server.

"sync" (model_or_collection, response, options) — Trigger if model or collection has been successfully synced with the server.

"error" (model_or_collection, response, options) — Trigger if model's or collection's request to the server has failed.

"invalid" (model, error, options) — Trigger if model's validation fails on the client.

"route:[name]" (params) — Trigger by the router if a specific route is matched.

"route" (route, params) — Trigger by the router if any route has been matched.

"route" (router, route, params) — Trigger by history if any route has been matched.

"all" — It fires for all the triggered events by the passing event name as the first argument.

Example of "add"

<!DOCTYPE html>

<html>

<head>

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

document.write('Here is the result' + '');

objCollcetion.each(function (model, index, list)

{

document.write(model.get('name') + '|' + model.get('class') + '');

});

</script>

</head>

</html>

Output :

Here is the result
john2|3
john3|4

Example of "remove"

<!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]);

document.write('Here is the result' + '');

objCollcetion.each(function (model, index, list) {

document.write(model.get('name') + '|' + model.get('class') + '');

});

document.write('---------------------' + '');

document.write('Here is the result after remove' + '');

objCollcetion.remove([obj2]);

objCollcetion.each(function (model, index, list) {

document.write(model.get('name') + '|' + model.get('class') + '');

});

</script>

</head>

</html>

Output :

Here is the result
john2|3
john3|4
---------------------
Here is the result after remove
john3|4

005 BackboneJS Events once,listenTo,stopListening,listenToOnce

once : Similar to "on", but "once" fire only once before being removed.

            1)event − It binds an object.

            2)callback − It is the reference to the code.

            3)context − An java script object that can be passed to a callback function.

Example

<!DOCTYPE html>

<html>

<head>

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

type="text/javascript">

</script>

var obj = {};

_.extend(obj, Backbone.Events);

var Function1 = function ()

{

document.write("I am learing BackBoneJS");

};

var Function2 = function ()

{

document.write("I am learing Backbone Events");

};

obj.once("PassMsg", Function1);

obj.once("PassMsg", Function2);

document.write("-------------calling first time-----------");

obj.trigger("PassMsg");

document.write("-------------calling second time-----------");

obj.trigger("PassMsg");

</script>

</head>

</html>

Output :
-------------calling first time-----------
I am learing BackBoneJS
I am learing Backbone Events
-------------calling second time----------

listenTo : It tells an object to listen to particular event on an another object. listenTo to keep track of the events, and that can be removed later.

object.listenTo(other, event, callback)

            1)event − It binds an object.

            2)callback − It is the reference to the code.

            3)context − An java script object that can be passed to a callback function.

Example

<!DOCTYPE html>

<html>

<head>

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

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

var obj1 = {};

var obj2 = {};

_.extend(obj1, Backbone.Events);

_.extend(obj2, Backbone.Events);

var Function1 = function ()

{

document.write("I am learing BackBoneJS");

};

// The object 'obj2' listens once for the 'PassMsg' event triggered on object 'obj1'

obj2.listenTo(obj1, 'PassMsg', Function1)

obj1.trigger("PassMsg");

</script>

</head>

</html>

Output :

I am learing BackBoneJS

stopListening :Instruct an object to stop listening to events

object.

stopListening(other, event, callback)

1)other: Define the name of the other object.
2)event − It binds an object.
3)callback − It is the reference to the code.

Example

<!DOCTYPE html>

<html>

<head>

var obj1 = {};

var obj2 = {};

_.extend(obj1, Backbone.Events);

_.extend(obj2, Backbone.Events);

var Function1 = function ()

{

document.write("I am learing BackBoneJS");

};

document.write("---Before Firing Stop Listeing----------");

// The object 'obj2' listens once for the 'PassMsg' event triggered on object 'obj1'

obj2.listenTo(obj1, 'PassMsg', Function1)

obj1.trigger("PassMsg");

document.write("---After Firing Stop Listeing----------");

obj2.stopListening(obj1, "PassMsg");

obj1.trigger('PassMsg');

</script>

</head>

</html>

Output :
---Before Firing Stop Listeing----------
I am learing BackBoneJS
---After Firing Stop Listeing----------

listenToOnce :Same as listenTo event, but listento to occur only once before the callback function is being removed.

    object.listenToOnce(other, event, callback)

    other − It defines name of the other object.

    event − It binds an object.

    callback − It is reference to the code and called with object as context.

Example

<!DOCTYPE html>

<html>

<head>

var obj1 = {};

var obj2 = {};

_.extend(obj1, Backbone.Events);

_.extend(obj2, Backbone.Events);

var Function1 = function ()

{

document.write("I am learing BackBoneJS");

};

obj2.listenToOnce(obj1, 'PassMsg', Function1)

document.write("---First Time Call----------");

obj1.trigger("PassMsg");

document.write("---Second Time Call----------");

obj1.trigger("PassMsg");

</script>

</head>

</html>

Output :

---Before Firing Stop Listeing----------
I am learing BackBoneJS
---After Firing Stop Listeing----------

The Knowledge Foundation

Friday, 8 June 2018

006 BackboneJS Built-in Events add , remove

005 BackboneJS Events once,listenTo,stopListening,listenToOnce

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

Labels

Report Abuse