The Knowledge Foundation

Friday, 8 June 2018

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----------

004 BackboneJS Events on, off, Trigger

Events is a module that can be bind with an object and trigger custom events.you can bind the custom events by using the your custom name.You do not need to declared events before they are bound.

There are several method of Event

on : object.on(event, callback, [context])

       "on" method bind a callback function to an object. The callback will be invoked when a event triggers.

            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.

Below is the example of "on" method.

Example

<!DOCTYPE html>

<html>

<head>

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

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

var obj = {};

_.extend(obj, Backbone.Events);

obj.on("PassMsg", function (Mymsg)

{

document.write(Mymsg);

});

obj.trigger("PassMsg", "I am learing BackboneJS");

</script>

</head>

</html>

Output :

off : object.off([event], [callback], [context])

Clear object with previously-bound callback function . If no context is specified, all of the versions of the callback with different contexts will be 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
');

};

document.write('-------------Before calling off fuction-----------
');

obj.on("PassMsg", Function1);

obj.on("PassMsg", Function2);

obj.trigger("PassMsg");

obj.off("PassMsg", Function1);

document.write('-------------After calling off fuction------Function1 is off-----
');

obj.trigger("PassMsg");

</script>

</head>

</html>

Output

-------------Before calling off fuction-----------
I am learing BackBoneJS
I am learing Backbone Events
-------------After calling off fuction------Function1 is off-----
I am learing Backbone Events

Trigger : Trigger callbacks functions for the given event.

          object.trigger(event, [*args])

      event − It binds an object.

    args − It passes arguments to the callback function.

We will again see the same example to know how trigger works.

<!DOCTYPE html>

<html>

<head>

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

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

var obj = {};

_.extend(obj, Backbone.Events);

obj.on("PassMsg", function (Mymsg)

{

document.write(Mymsg);

});

obj.trigger("PassMsg", "I am learing BackboneJS");

</script>

</head>

</html>

Output :

The Knowledge Foundation

Friday, 8 June 2018

005 BackboneJS Events once,listenTo,stopListening,listenToOnce

004 BackboneJS Events on, off, Trigger

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

Labels

Report Abuse