Under the Explicitly Subscribing to Observables section of the Knockout documentation, there is a reference to an event parameter of the subscribe function, but the only two examples given on that page are change and beforeChange.
By way of example, I tried passing in "focus" as the third parameter but that didn't work. I'm not too surprised as "focus" is an event of a DOM Element rather than a knockout observable, but nonetheless it could theoretically have setup a subscription to the focus event for all elements bound to that observable.
Is there a list of all events that can be subscribed to manually using Knockout's observable.subscribe function?
It make sens to use "event" binding in your case.
Because there are only two ways to notify subscribers of observable variable: beforeChange and change.
In knockoutJs code there is simple chain of if blocks which check if event is specified, and if event is equal to beforeChange. That's basically all logic which goes there, so no other events fired.
Part form knockoutJS which implements this logic:
self["notifySubscribers"] = function(value, event) {
if (!event || event === defaultEvent) {
self._rateLimitedChange(value);
} else if (event === beforeChange) {
self._rateLimitedBeforeChange(value);
} else {
self._origNotifySubscribers(value, event);
}
};
Related
fromEvent(document, 'visibilitychange').subscribe(() => doSomething());
I'd like to bind an event to the document with fromEvent operator and I'm wondering if I need to remove/unbind the handler with takeUntil or by unsubscribing it on the destroy phase. I've come to learn that event handlers are released when the element they are binded with is removed from DOM but in this case, since I bind the handler on document, I feel like having to release it on my own but I'm not sure. Any insight would be appreciated!
As far as I know when Dom node is removed from the document tree the associated event will be removed, however since the event is binded by using rxjs fromEvent, you will still need to unsubscribe to prevent memory leak.
Regarding the document node, by looking into the source code of fromEvent, it will invoke removeEventListener for you upon your unsubscription. Again you will need to invoke unsubscribe when you no longer need it.
function setupSubscription(sourceObj, eventName, handler, subscriber, options) {
let unsubscribe;
if (isEventTarget(sourceObj)) {
const source = sourceObj;
sourceObj.addEventListener(eventName, handler, options);
unsubscribe = () => source.removeEventListener(eventName, handler, options);
}
I've read through the Ractive Documentation and I'm scratching my head a bit, because it seems like the default events initialization option allows me to do something - create new eventtypes - far more complex than what i need but conversely, there's no hook for the simpler, (more common?) task of defining default events
Could someone advise on how to provide global events that could be fired for traditional DOM events?
Example:
I have a 3 Component application page. I want to define a getOptions event, such that any <select on-click='getOptions'>...</select> will be handled by the same function. I don't want to have to define that function in each component.
My intuition would have been to do the following:
Ractive.events['getOptions'] = function(event){
//logic for getting the options for the value in event.keypath
}
or, if i wanted a true default that could be overridden...
Ractive.default.events['getOptions'] = function(event){
//logic for getting the options for the value in event.keypath
}
but my understanding of the documentation, is that Ractive.events and Ractive.default.events do not provide this, but rather provide a way to define new event plugins, that depend on a separate mechanism for getting fired:
Ractive.events.getoptions = function(node,fire){
//here goes logic for interacting with DOM event listeners, etc
}
//and then i would need to do this
ractive = Ractive.extend({...});
ractive.on('someOtherEventName',function(event){
//logic for getting the options for the value in event.keypath
});
//and then I could do this...
<select on-getoptions='someOtherEventName'>...</select>
but what would fire the getoptions in this case - from the template, rather than js ractive.fire()?
Would something like <select on-getoptions='someOtherFunction' on-click=getoptions>...</select> work? That seems very strange to me. Do I understand the concept correction? If not, what am i missing?
Is there a simple way to achieve the first example?
Ractive.events refers to custom events for mediating between the dom and the template:
Ractive.events.banana = function( node, fire ) { ... };
<div on-banana="doSomething()"/>
The handler for the event can either be the name of an event to fire, or a method on the component instance.
In your case, I think defining a method on the Ractive.prototype would be the best way to have a common handler:
Ractive.prototype.getOptions = function( /* pass in arguments */ ){
// and/or this.event will give you access
// to current event and thus context
// you can also override this method in components and
// call this base method using this._super(..)
}
// now any ractive instance can use:
<select on-click="getOptions(data)">...</select>
An event based approach usually entails letting the root instance or common parent in the view hierarchy handle same event across child components:
var app = new Ractive({
template: "<componentA/><componentB/>",
oninit(){
this.on( '*.getOptions', ( event, arg ) => {
// any child component (at any depth)
// that fires a "getOptions" event will
// end up here
});
}
});
// in component A or B:
<select on-click="getOptions">...</select>
UPDATE: If you wanted to assign an event handler to the prototype, so in essence every component is pre-wired to handle an event of a set name, you could do:
Ractive.prototype.oninit = function(){
this.on( 'getOptions', ( event ) => {
// handle any "getOptions" event that happens in the instance
});
}
Just be aware that you must call this._super(); in any component in which you also implement oninit:
var Component = Ractive.extend({
oninit() {
// make sure we call the base or event listener won't happen!
this._super();
// do this component instances init work...
}
}
I'm having a hard time understanding the syntax of the .delegate function of jquery. Let's say I have the following:
$(".some_element_class").delegate("a", "click", function(){
alert($(this).html());
});
I know that the a element is the element to which the click event is applied. I know that once we click on that a element, the event click will be triggered and the callback function will be called. But what is the purpose of what comes before the .delegate? In this case, what is the purpose of .some_element_class? How do I read the above including the .some_element_class? Also, in the example above, what does $(this) represent? Does it represent the a element or does it represent .some_element_class?
Please somebody, shed some light on this.
Thank you
This reduces event binding.
This basically sets an event on a tags ONLY within the elements with class .some_element_class without actually binding an event to a tags directly.
http://api.jquery.com/delegate/
http://api.jquery.com/on/
As of jQuery 1.7, .delegate() has been superseded by the .on() method.
For earlier versions, however, it remains the most effective means to
use event delegation. More information on event binding and delegation
is in the .on() method. In general, these are the equivalent templates
for the two methods:
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(elements).on(events, selector, data, handler); // jQuery 1.7+
$(".some_element_class").on("a", "click", function(){
alert($(this).html());
});
"...what is the purpose of what comes before the .delegate?"
A delegate is bound to .some_element_class element.
That delegate is triggered for every click that takes place inside .some_element_class
That delegate tests what was clicked, so your handler function will only run if...
the actual element clicked matches the "a" selector, or
any ancestor of the actual element clicked that is a descendant of .some_element_class matches the "a" selector.
<div class="some_element_class"> <!-- delegate handler is here -->
<div>won't trigger your handler</div>
<a>will trigger your handler</a>
<a><span>will trigger</span> your handler</a>
</div>
So you can see that only one handler is bound to the container. It analyzes all clicks inside the container, and if the element clicked (or one of its nested ancestors) matches the selector argument, your function will run.
Because there's just one enclosing handler, it will work for future elements added to the container...
<div class="some_element_class"> <!-- delegate handler is here -->
<div>won't trigger your handler</div>
<a>will trigger your handler</a>
<a><span>will trigger</span> your handler</a>
<!-- this element newly added... -->
<a><span>...will also trigger</span> your handler</a>
</div>
"Also, in the example above, what does $(this) represent?"
this will represent the element that matched the "a" selector.
it means delegate() is invoked on the .some_event_class. and the a is selector string, click is event type string & function() is eventhandler function. delegate() method is used to handle the "live event" and for static events bind() is used. I hope this helps. feel free to ask if you have any doubts
Differences between bind() & delegate()
//Static event handlers for static links
$("a").bind("",linkHandler);
//Live event handlers for dynamic parts of the document
$(".dynamic").delegate("a", "mouseover", linkHandler);
Summary: they are just methods that bind event handlers to specific document elements.
The a is actually just a filtering selector, what will happen is that a normal click event is bound to .some_element_class, and anytime the event fires, the event target is traversed up to .some_element_class to see if there is an element that matches the filtering selector (tagname a). If it does, your callback is fired with this set to the first element that matched a selector in the bubbling path.
You can do something similar with bind:
$(".some_element_class").bind("click", function (e) {
var matches = $(e.target).closest("a", this);
if (matches.length) {
yourcallback.call(matches[0], e);
}
});
So I have been adding my events thusly:
element.addEvent('click', function() {
alert('foobar');
});
However, when attempting to remove said event, this syntactically identical code (with "add" switched to "remove") does not work.
element.removeEvent('click', function() {
alert('foobar');
});
I assume this is because the two functions defined are not referenced the same, so the event is not technically removed. Alright, so I redefine the event addition and removal:
element.addEvent('click', alert('foobar'));
element.removeEvent('click', alert('foobar'));
Which works great, except now when the page loads, the click event is fired even before it's clicked!
The function is removed, though, which is great......
update: when you do .addEvent('type', function(){ }) and .removeEvent('type', function(){ }), even though the functions may have the same 'signatures', they are two separte anonymous functions, assigned on the fly. function 1 is !== to function 2 - hence there is no match when MooTools tries to remove it.
to be able to remove an exact handler, o:
function handler(){ ... }
el.addEvent('click', handler);
// .. later
el.removeEvent('click', handler);
Internally, events are actually a map of keys to functions in element storage. have a look at this fiddle i did a while back for another SO question - http://www.jsfiddle.net/mVJDr/
it will check to see how many events are stacked up for a particular event type on any given element (or all events).
similarly, removeEvent looks for a match in the events storage - have a look on http://jsfiddle.net/dimitar/wLuY3/1/. hence, using named functions like Nikolaus suggested allows you to remove them easily as it provides a match.
also, you can remove events via element.removeEvents("click") for all click events.
your page now alerts because you pass on alert as the function as well as execute it with the params 'foobar'. METHOD followed by () in javascript means RUN THE METHOD PRECEDING IT IMMEDIATELY, NOT LATER. when you bind functions to events, you pass the reference (the method name) only.
to avoid using an anonymous function and to pass argument,s you can do something like:
document.id('foobar').addEvent('click', alert.bind(this, 'foo'));
as bind raps it for you, but removing this will be even more complicated.
as for event delegation, it's:
parentEl.addEvents({
"click:relay(a.linkout)": function(e, el) {
},
"mouseover:relay(li.menu)": function(e, el) {
}
});
more on that here http://mootools.net/docs/more/Element/Element.Delegation#Element:removeEvent
keep in mind it's not great / very stable. works fine for click stuff, mouseenter is not to be used delegated, just mouseover - which means IE can fire mouseout when it should not. the way i understand it, it's coming improved in mootools 2.0
edit updating to show an example of bound and unbound method within a class pattern in mootools
http://www.jsfiddle.net/wmhgw/
var foo = new Class({
message: "hi",
toElement: function() {
return this.element = new Element("a", {
href: "http://www.google.com",
text: "google",
events: {
"click": this.bar.bind(this), // bind it
"mouseenter": this.bar // unbound -> this.element becomes this
}
});
},
bar: function(event) {
event.stop();
// hi when bound to class instance (this.message will exist)
// 'undefined' otherwise.
console.log(this.message || "undefined");
}
});
document.id(new foo()).inject(document.body);
the mouseenter here will be unbound where this will refer to the default scope (i.e the element that triggered the event - the a href). when bound, you can get the element via event.target instead - the event object is always passed on to the function as a parameter.
btw, this is a slightly less familiar use of class and element relation but it serves my purposes here to illustrate binding in the context of classes.
assig the function to a variable and use the same reference to add and remove the event.
if you use an anonymous function you will get to different references
var test = function(){ alert('test: ' + this.id); }
$('element').addEvent('click', test);
...
$('element').removeEvent('click', test);
addEvent : Attaches an event listener to a DOM element.
Example -
$('myElement').addEvent('click', function(){
alert('clicked!');
});
removeEvent : Works as Element.addEvent, but instead removes the specified event listener.
Example -
var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myElement').addEvent('click', destroy);
//later...
$('myElement').removeEvent('click', destroy);
This means when you add an event with a eventhandler not an anonymous function if you than remove the event than it will be removed.
Here's my problem, I have an input element in a form that is implementing jQuery.Autocomplete and jQuery.validate, all working normally except when I click an element in the autocomplete list to select it.
What happens is validation occurs before the autocomplete sets its value. Because validation occurs on onBlur, and you just clicked an item in the autocomplete list, blur fires and validation occurs a split second before the input is filled with its new value.
I wouldn't mind a double-validation if it was client side, but I happen to be executing an expensive remote ajax validation on this field, so I'd really like to solve this the right way.
My first thought is to proxy all validation onBlur events through a function that times out 10ms later, essentially flip flopping the event order. But, I think, that means tearing into the jQuery.Validate.js code, which I'd rather not do.
Any ideas?
I was able to get this working but perhaps not as elegantly as I would have liked. Ideally I would have liked to call the prototype or defaults version of of onfocusout from within a timeout closure but I wasn't able to figure out how to reference it from that scope.
The approach that I took instead was to override the onfocusout method with its code copy/pasted into a timeout closure. The only other tweak was to change references from this to _this to work within the different scope of the timeout closure.
$("#aspnetForm").validate({
success: "valid",
onkeyup: "false",
onfocusout:
function(element) {
//Delay validation so autocomplete can fill field.
var _this = this;
setTimeout(function() {
if (!_this.checkable(element) && (element.name in _this.submitted || !_this.optional(element)))
_this.element(element);
_this = null;
}, 250);
}
});
Feel free to post improvements.