In this code, will the trigger then call topbar.resize or will it just simply run the function contained in it? I assume there is a context difference between the two, or how does that work?
jQuery.bind("hideBackstage", topbar.resize);
Edit: How do I make it just simply call topbar.resize?
The call will be equivalent to
topbar.resize.call(touchedElement, jqueryWrappedEvent);
That is the function "contained" in topbar.resize will be called with receiver (this) the element having received the event and with parameter the event (wrapped as a jquery event).
This is different from
topbar.resize()
because
the receiver (this) won't be topbar
an event is provided as parameter
EDIT following your EDIT :
If you just want the call to be equivalent to topbar.resize(), simply do this :
jQuery.bind("hideBackstage", function(){topbar.resize()});
you can use jQuery proxy or
jQuery.bind("hideBackstage", function(){
topbar.resize.apply(topbar, arguments); // seting context as topbar for resize.
});
You can use $.proxy() (which funnily enough is analogous to Function.prototype.bind()).
jQuery.bind("hideBackstage", $.proxy(topbar.resize, topbar));
However, you won't have access to the event object.
Related
I created a custom variable/function that I am trying to execute when an element is clicked. For some reason, it decides to display onload and ignores the .click(). I've spent a while now trying to figure this out, but I'm not having much luck.
Here's my custom function:
var movebox = function (entry) {
$imagebox.css('left' , '0');
$('#wr').append(entry);
};
I'm attempting to call it like this, but it calls it when the page loads instead.
$l3.click(movebox('test'));
You're calling the movebox function immediately instead of passing the function as a reference to the click event handler. This is a common mistake in JavaScript. Instead, pass in your function inside of an anonymous function, like so:
$l3.click(function() {
movebox('test');
});
As an aside, the same mistake is oftentimes made with setTimeout, setInterval, addEventListener, and the infamous eval. Remember, when treating functions as arguments to another function, be sure to wrap them in anonymous functions.
You are calling the movebox then passing the returned value to click event handler, in this case you can use the .on() event registration helper to pass a data element to the event handler which can be accessed using the event object.
Try
var movebox = function (e) {
$imagebox.css('left' , '0');
$('#wr').append(e.data.entry);
};
$l3.on('click',{ entry: 'test'}, movebox);
I think this question is more a javascript question than a backbone question, but I've run into it while developing an application in backbone, so that's the context I will ask it in.
I am binding a method with arguments to a model's change event. The code below executes that method when the listener is bound, not when the event is fired:
this.model.on("change:disposition", this.dChange("disposition"), this);
while the following code executes the method when the change event is fired (the desired behavior):
this.model.on("change:disposition", function(){ this.dChange("disposition"); }, this);
I would appreciate it if someone could describe what specifically is happening in these two instances. Also, is there is a better way to bind a method with arguments rather than wrapping it in a closure as I've done?
Thanks.
When you call this.dChange("disposition") you're invoking the function. (You're using the parentheses () to invoke)
But when you do function() {} or this.dChange you're in fact referencing a function object. And it's this reference that the event manager will call once the event is fired.
Side note: In your case, instead of using an anonymus function, you could use the bind method of Underscore.js like this:
this.model.on("change:disposition", _.bind(this.dChange, this, "disposition"));
I am fairly new to javascript and using the YUI yahoo library.
http://developer.yahoo.com/yui/docs/YAHOO.util.CustomEvent.html
I am trying to understand the subscribe and fire methods in a CustomEvent class. I have two questions regarding these
When the fire method is called. Does it fire all the functions that are subscribed to the event?
How do I fire an individual event? The subscribe method takes the parameter "obj An object to be passed along when the event fires." so is there
a way I can fire only this particular object?
Correct me if I misunderstand anything in the CustomEvent. :)
When the fire method is called. Does it fire all the functions that
are subscribed to the event?
The custom event (publisher) fires without caring who is listening (subscriber).
Calling the fire() method causes all the listener methods to get fired.
How do I fire an individual event?
You fire an individual event using :
var onCustomEvent = new YAHOO.util.CustomEvent('onCustomEvent');
onCustomEvent.fire();
The subscribe method takes the parameter "obj An object to be passed along when the event fires." so
is there a way I can fire only this particular object?
You can fire the customEvent not the object ,
passing objects is used to pass arguments so they can be accessed in the subscribe method :
onCustomEvent.fire({action:'fire'});
onCustomEvent.subscribe(method);
function method(event, arguments, obj) {
var action= args[0].action;//action contains fire
}
event returns the name of the custom event
arguments is the set of arguments that are passed in the fire event
obj is the argument that is passed in the subscribe method.
If this is a new project, you should use YUI3. Then you might benefit from this documentation.
I'm trying to register on +1 clicks from within my module, which is wrapped as an annonymous function.
For this end, I created a global object MyModule, and exported my click handler function through it. The problem is - my click handler doesn't get called.
Live demo. Code:
// Initialize +1 button
gapi.plusone.go();
(function(){
window.MyModule = {};
function plusOneClicked() {
alert("+1!");
}
window.MyModule.plusOneClicked = plusOneClicked;
})()
...
<g:plusone callback='window.MyModule.plusOneClicked'></g:plusone>
When I give as a callback an external function, whose only purpose is to forward the calls to window.MyModule.plusOneClicked, it works:
function foo() {
window.MyModule.plusOneClicked();
}
...
<g:plusone callback='foo'></g:plusone>
Why would the click handler miss window.MyModule.plusOneClicked(), but find foo()?
Google is probably writing
window[callback]();
in their code.
This requires that the callback string refer to a property of window, not a property of another object.
I believe because callback expects a direct handler method (as in foo()) rather than a reference (as in window.MyModule.plusOneClicked). So basically, you cannot simply assign such a reference to click handler, but write a (wrapper) method as the handler and have it perform the necessary invocation.
Why this works in jQuery :
$('#selCars').change(function(){
alert( "I have changed!" );
})
but not this one :
$('#selCars').change(alert( "I have changed!" ) );
You pass a function reference to .change(). Your second example just has code there, not a function reference.
Your first example works because it passes a function reference which IS what is required.
A function reference is required because this is a callback that will be called at a later time. The .change() function which executes immediately needs to save the callback reference into it's own variable and then call it later when the change event actually occurs. To do that, it needs a function to call at that later time, not a raw piece of code.
And, the other answer is because, .change() was written to require a function reference. That's how the developers that spec'ed and wrote it designed it. If you want it to work, you have to follow their rules.
Because it's a callback, i.e. you're passing something that be called back later, so what you've to pass is a reference to a function, and that reference will be stored and called when the event will fire.
The change method doesn't store some code, it stores only a pointer to the function. Your function is called an event handler.
It's because .change() attaches an event handler to an element. The handler won't be called until the event has occurred.
Since in JavaScript, functions are just another datatype, you could also do this:
var handler = function(event) {
alert("I have changed!");
}
$('#selCars').change(handler);
Note that handler is a function, Whereas alert() would just return undefined.