We Keep Coding

How can I map one object usage to route to 2 objects?

I use totango for some usage tracking. Now, while we try to rework the way we track, I want to send trackings into 2 different totango accounts, for a transition period.
I've managed to split the objects into window.totango_old and window.totango_beta.
Now instead of replacing all the old usages of window.totango, I was wondering whether I can make window.totango simply apply any arbitrary method I use on it onto the 2 different objects specified above.
I've tried figuring out the usage with .apply(), but I can't fully grasp how it would work in my case.
I want to avoid doing this:
window.totango = function() {
return {
track: function(event, value) {
window.totango_old.track(event, value);
window.totango_beta.track(event, value);
}
}
}
Because it means I have to map the usable functions one by one. Is there a "catch-all" way that would pass any method I call on an object, and let me get its name and arguments, to pass on to different objects dynamically?
I tried running a test, like so:
window.test2 = function() {
return {
testFunc: function(a, b) {
console.log([a, b]);
}
}
};
window.test = function() {
this.apply(window.test2, arguments)
// also tried: window.test2.apply(window.test2, arguments)
};
window.test.testFunc("1", "2");
But I received the following exception:
Uncaught TypeError: undefined is not a function

You could use something like this:
window.callFunction = function( method, args ) {
var res = { };
//Set the default values
method = method || 'track';
args = args || [ ];
//in case we want the result of the functions
res.old = window.totango_old[ method ].apply( window.totango_old, args );
res.beta = window.totango_beta[ method ].apply( window.totango_beta, args );
return res;
}
Because totango_old is an object, you can use the name of the method as the index, then call apply on the returned function and pass your arguments. The first parameter of apply is the value of "this" in that context. Depending on how the module is set up it is important to have the right value in the first parameter. The second parameter passed to apply is the arguments to pass to the function.
You could possibly do something like this
function TotangoFill () {
}
TotangoFill.prototype = {
callFunction: function ( method, args ) {
var res = { };
//Set the default values
args = args || [ ];
//in case we want the result of the functions
res.old = window.totango_old[ method ].apply( window.totango_old, args );
res.beta = window.totango_beta[ method ].apply( window.totango_beta, args );
return res;
},
track: function( event, value ) {
// arguments is an array of all the arguments passed to this function
return this.callFunction( 'track', arguments );
},
anotherMethod: function( ) {
//You don't need to define the parameters, just pass them on
return this.callFunction( 'anotherMethod', arguments );
},
customEvent: function( value ) {
//Add another layer of abstraction
return this.track( 'customEvent', value );
}
}
window.totango = new TotangoFill( )

You have a problem with your attempt to wrap totango which explains the error in your test, and can be easily resolved without changing your invocations.
Specifically, you need to actually invoke the function that you assigned to window.totango such that totango contains the returned object, and not the function itself, i.e.:
window.totango = (function() {
return {
track: function(event, value) {
window.totango_old.track(event, value);
return window.totango_beta.track(event, value);
}
}
})(); // invocation

Get the right object as "this" in my reactor pattern callback

First of all I would like say it is the first time i'm working with a reactor pattern.
I've tried a bit of everything with the knowledge I have but without any succes. This is my script so far:
function Reactor(){
this.events = {};
}
Reactor.prototype.registerEvent = function(eventName){
this.events[eventName] = {name: eventName, callbacks: []};
};
Reactor.prototype.dispatchEvent = function(eventName, eventArgs){
for(var i in this.events[eventName].callbacks) {
this.events[eventName].callbacks[i](eventArgs);
}
};
Reactor.prototype.addEventListener = function(eventName, callback){
if(typeof(this.events[eventName]) == 'undefined') this.registerEvent(eventName);
return this.events[eventName].callbacks.push(callback) - 1;
};
and to test the script I have this
var test = new Reactor();
test.addEventListener('ping', function() {
console.log(this); //I want this to be the 'test' object
});
test.dispatchEvent('ping');
So I create a new reactor object, adds a eventlistener to it and then dispatch the event. But in the callback function I want "this" to be the "test" object.

You can call your methods with call or apply to force a particular this value:
Reactor.prototype.dispatchEvent = function(eventName, eventArgs){
for(var i in this.events[eventName].callbacks) {
this.events[eventName].callbacks[i].apply(this, eventArgs);
}
};
(assuming eventArgs is an array, the callback will be called with each element from the array passed as a separate argument)

how to trigger "online" event manually [duplicate]

I was wondering if anyone can help me understand how exactly to create different Custom event listeners.
I don't have a specific case of an event but I want to learn just in general how it is done, so I can apply it where it is needed.
What I was looking to do, just incase some folks might need to know, was:
var position = 0;
for(var i = 0; i < 10; i++)
{
position++;
if((position + 1) % 4 == 0)
{
// do some functions
}
}

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);
// custom param
evt.foo = "bar";
//register
document.addEventListener("myEvent",myEventHandler,false);
//invoke
document.dispatchEvent(evt);
Here is the way to do it more locally, pinpointing listeners and publishers:
http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Implementing custom events is not hard. You can implement it in many ways. Lately I'm doing it like this:
/***************************************************************
*
* Observable
*
***************************************************************/
var Observable;
(Observable = function() {
}).prototype = {
listen: function(type, method, scope, context) {
var listeners, handlers;
if (!(listeners = this.listeners)) {
listeners = this.listeners = {};
}
if (!(handlers = listeners[type])){
handlers = listeners[type] = [];
}
scope = (scope ? scope : window);
handlers.push({
method: method,
scope: scope,
context: (context ? context : scope)
});
},
fireEvent: function(type, data, context) {
var listeners, handlers, i, n, handler, scope;
if (!(listeners = this.listeners)) {
return;
}
if (!(handlers = listeners[type])){
return;
}
for (i = 0, n = handlers.length; i < n; i++){
handler = handlers[i];
if (typeof(context)!=="undefined" && context !== handler.context) continue;
if (handler.method.call(
handler.scope, this, type, data
)===false) {
return false;
}
}
return true;
}
};
The Observable object can be reused and applied by whatever constructor needs it simply by mixng the prototype of Observable with the protoype of that constructor.
To start listening, you have to register yourself to the observable object, like so:
var obs = new Observable();
obs.listen("myEvent", function(observable, eventType, data){
//handle myEvent
});
Or if your listener is a method of an object, like so:
obs.listen("myEvent", listener.handler, listener);
Where listener is an instance of an object, which implements the method "handler".
The Observable object can now call its fireEvent method whenever something happens that it wants to communicate to its listeners:
this.fireEvent("myEvent", data);
Where data is some data that the listeners my find interesting. Whatever you put in there is up to you - you know best what your custom event is made up of.
The fireEvent method simply goes through all the listeners that were registered for "myEvent", and calls the registered function. If the function returns false, then that is taken to mean that the event is canceled, and the observable will not call the other listeners. As a result the entire fireEvent method will return fasle too so the observable knows that whatever action it was notifying its listeners of should now be rolled back.
Perhaps this solution doesn't suit everybody, but I;ve had much benefit from this relatively simple piece of code.

From here:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
// create the event
const event = new Event('build');
// elem is any element
elem.dispatchEvent(event);
// later on.. binding to that event
// we'll bind to the document for the event delegation style.
document.addEventListener('build', function(e){
// e.target matches the elem from above
}, false);

Here is a really simple (TypeScript/Babelish) implementation:
const simpleEvent = <T extends Function>(context = null) => {
let cbs: T[] = [];
return {
addListener: (cb: T) => { cbs.push(cb); },
removeListener: (cb: T) => { let i = cbs.indexOf(cb); cbs.splice(i, Math.max(i, 0)); },
trigger: (<T> (((...args) => cbs.forEach(cb => cb.apply(context, args))) as any))
};
};
You use it like this:
let onMyEvent = simpleEvent();
let listener = (test) => { console.log("triggered", test); };
onMyEvent.addListener(listener);
onMyEvent.trigger("hello");
onMyEvent.removeListener(listener);
Or in classes like this
class Example {
public onMyEvent = simpleEvent(this);
}
If you want plain JavaScript you can transpile it using TypeScript playground.

Using 'this' inside a callback inside an object literal [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript prototype ‘this’ issue
I have an event listener which of course calls a method on an event. This method tries unsuccessfully to hold a reference to the holding objects this so that it can access other properties of the object.
There is a single comment denoting where the behavior is not understood. this_hold.Name is not accessible there as I thought it would be.
/*MUserExist
**
**
**
*/
$A.module({
Name: 'MUserExist',
S: {
ClientStorage: SClientStorage,
ComMessage: SComMessage,
ComText: SComText,
DynSma: SDynSma,
DynTwe: SDynTwe,
DynArc: SDynArc,
AniMorphLabel: SAniMorphLabel,
AniFlipPage: SAniFlipPage
},
E: {
but: $A('#ue_but')[0],
text: $A('#ue_go')[0],
form: $A('#ue_fo')[0],
check: $A('#ue_check')[0]
},
J: {
box: $('#ue_box')
},
init: function () {
var pipe = {},
this_hold = this;
this.J.box.draggable();
this.E.but.addEventListener("click", function () {
pipe = $A.definePipe(this_hold.Name);
$A.machine(pipe);
}, false);
this.E.text.addEventListener("keypress", this.enter, false);
this.S.AniMorphLabel.run(["ue_email",
"ue_email_lab",
"ue_go",
"ue_pass_lab"
]);
},
enter: function (event) {
var pipe = {},
this_hold = this;
if (event.keyCode === 13) {
pipe = $A.definePipe(this_hold.Name); // fails here what does 'this' point to?
$A.machine(pipe);
event.preventDefault();
}
},
pre: function (pipe) {
var form_elements = this.E.form.elements,
text_object = new this.S.ComText(form_elements);
pipe.enter = this.enter;
if ($A.Un.get('load') === '1') {
if (!text_object.checkFull()) {
pipe.type = 'empty';
return this.S.ComMessage.message(pipe);
}
if (!text_object.checkPattern('email')) {
pipe.type = 'email';
return this.S.ComMessage.message(pipe);
}
if (!text_object.checkPattern('pass')) {
pipe.type = 'pass';
return this.S.ComMessage.message(pipe);
}
}
pipe.page = text_object.getArray();
pipe.proceed = true;
pipe.page.remember = this.E.check.checked;
return pipe;
},
post : function (pipe) {
if (pipe.proceed === true) {
this.S.ComMessage.resetView('ue_email');
this.S.ComMessage.resetView('ue_go');
this.S.ClientStorage.setAll(pipe.server.smalls);
this.S.DynSma.run(pipe.server.smalls);
this.S.DynArc.run(pipe.server.arcmarks);
this.S.DynTwe.run(pipe.server.tweets);
this.S.AniFlipPage.run('ma');
} else {
return this.S.ComMessage.message(pipe);
}
}
});

this likely points to the DOM node from which the event was triggered. Have you tried writing this to the console to inspect it?
console.log(this);

this is the DOM object that generated the event. It is NOT your javascript object.
When you pass this.enter as the method for the event handler, the method enter does not stay bound to your object. If you want that to happen, you have to change your code to cause that to happen by doing something like this:
// save local copy of my object so I can refer to it in
// the anonymous function
var obj = this;
this.E.text.addEventListener("keypress", function(event) {obj.enter(event)}, false);
It is important to remember that this is set by the caller of a method/function. In this case the caller of the event handler is the event sub-system in the browser. It does not know what your object is and it's designed behavior is to set this to the DOM object that caused the event. So, if you want to call your obj.enter method, you can't just pass enter as the event handler. Instead, you make a separate function that gets called as the event handler and you then call obj.enter() from that using your object as the base so that this gets set correctly.
Another solution would be to use .bind() which also creates a stub function that binds the right this to a function call, but I don't use .bind() myself because it doesn't work in all older browsers.

Try to change how the event is being bound
this.E.text.addEventListener("keypress", this.enter, false);
to
var that = this;
this.E.text.addEventListener("keypress", function(event) {
that.enter(event);
}, false);

Can event handler defined within JavaScript object literal access itself?

I know I could do this with closures (var self = this) if object was a function:
click here
<script type="text/javascript">
var object = {
y : 1,
handle_click : function (e) {
alert('handling click');
//want to access y here
return false;
},
load : function () {
document.getElementById('x').onclick = this.handle_click;
}
};
object.load();
</script>

The simplest way to bind the call to handle_click to the object it is defined in would be something like this:
var self=this;
document.getElementById('x').onclick =
function(e) { return self.handle_click(e) };
If you need to pass in parameters or want to make the code look cleaner (for instance, if you're setting up a lot of similar event handlers), you could use a currying technique to achieve the same:
bind : function(fn)
{
var self = this;
// copy arguments into local array
var args = Array.prototype.slice.call(arguments, 0);
// returned function replaces first argument with event arg,
// calls fn with composite arguments
return function(e) { args[0] = e; return fn.apply(self, args); };
},
...
document.getElementById('x').onclick = this.bind(this.handle_click,
"this parameter is passed to handle_click()",
"as is this one");

So, the event handler part wires up just fine (I tested it myself) but, as your comment indicates, you have no access to the "y" property of the object you just defined.
This works:
var object = {
y : 1,
handle_click : function (e) {
alert('handling click');
//want to access y here
alert(this.y);
return false;
},
load : function () {
var that = this;
document.getElementById('x').onclick = function(e) {
that.handle_click(e); // pass-through the event object
};
}
};
object.load();
There are other ways of doing this too, but this works.

I see how to do it with Jason's latest one. Any way to do it without the anonymous function?

We can directly pass an object with a handler method thanks to AddEventListener, and you will have access to its attributes:
http://www.thecssninja.com/javascript/handleevent
Hope this will help those who, like me, will look for this topic some years after!