I'm exploring Mercury JS at the moment and can't seem to figure out a way to bind to the saved event.
According to the API docs, it should be as simple as:
Mercury.on("saved", function(event) {
// something here
}
...but that kicks up an error!
The following also doesn't work:
$(window).bind('mercury:saved', function() {
// no joy here either :(
};
Any clues?
I had the same problem. I solved it by setting the event function inside mercury:ready event.
Try
jQuery(window).on('mercury:ready', function() {
Mercury.on('saved', function(){
alert("It's working!");
});
});
I was having the same problem.
jQuery(window).bind('mercury:ready', function()
was working, but
jQuery(window).bind('mercury:saved', function()
wasnt.
Wired, but clearing the Browser-Cache did it for me.
Related
I don't know what I am doing wrong but here is an example of what I am doing and it doesn't seem to work.
someDom.addEventListener('mousemove',function(ev) {self.onInputMove(ev)},false);
someDom.removeEventListener('mousemove',self.onInputMove);
The removeEventListener code is executed but it just doesn't remove the 'mousemove' listener
removeEventListener removes the listener that exactly matches the function that was added.
In this case, the function that addEventListener added was:
var some_func = function(ev) {
self.onInputMove(ev);
};
Store a reference to the actual function and you'll be good. So for example, the following should work:
someDom.addEventListener('mousemove',self.onInputMove,false);
someDom.removeEventListener('mousemove',self.onInputMove,false);
onInputMove is not an event-callback method. So you need to do something like:
var event = function(ev) {self.onInputMove(ev)};
someDom.addEventListener('mousemove', event,false);
someDom.removeEventListener('mousemove', event, false);
Why make it yourself so hard, just use the following to bind an event to an element:
element.onmousemove = function(e) {
// Some code here...
alert("Mouse moved!");
};
Now, when you want to remove the event, just do this:
element.onmousemove = null;
Done!
Hope this helps you guys out!
This page comes first on searching this/such issue on Google. So apart from answers already mentioned, here is one more interesting fact for future:
Leaving out the third optional variable in addEventListener() for useCapture/useBubble (as it defaults to false) does create some issue while removing the same eventlistener with same callback name. I faced this issue while working on chrome. Cant say about other browsers.
So do mention the third variable explicitly as "false".
I'm working on some legacy code and have come across 3 similar constructs for triggering events
command/comply
trigger: .command('update:mySetting', newSetting);
handle: .comply('update:mySetting', myCallback);
listento/trigger
trigger: .trigger('change');
handle: .listenTo(myModel, 'change', myCallback);
request/reply
trigger: .request('change');
handle: .reply('change', myCallback);
What is the difference between these events and when should I use each of them?
Thanks
Note: I'm not sure if all of them come from marionette
https://github.com/marionettejs/backbone.radio
reply is used when you need to return a value when a request is made.
For example
Radio.channel('global').reply('something', function() { return 'something';});
// can also be
// Radio.channel('global').reply('something', 'something');
//... somewhere else in the code base
// someValue = 'something'
var someValue = Radio.channel('global').request('something');
You don't have to return anything with request/reply and just use it as a way to run a function. Doing this will make it work like command/comply, which makes command/comply not needed.
You can have one reply for a request, so redefining a reply will overwrite the last definition. It's one to one, for a reply you have a corresponding request.
// before
Radio.channel('global').reply('something', function() { return 'something';});
// somewhere else, it gets changed
Radio.channel('global').reply('something', 'not something');
Make changes at your discretion.
trigger/listenTo is the typical event system.
trigger can emit an event from anywhere in the code.
listenTo allows many listeners to listen to that event to do what is needed when fired.
Radio.channel('global').trigger('myEvent');
// somewhere in the code
view1.listenTo(Radio.channel('global'), 'myEvent', function() {
// do something
});
// somewhere else in the code
view2.listenTo(Radio.channel('global'), 'myEvent', function() {
// also do something
});
Other people had this problem also, but I was not able to transfer the answers to my problem. So I just ask :-)
I got this code, using a star-rating-plugin ("rateit"):
<div class="rateit"></div>
Now I want to call a function after clicking on the div. When I just use
$(document).on('rated', '.rateit', function() { alert("aha"); });
this works, I get the alert. But when I call a function of the rateit-plugin with
$(document).on('rated', '.rateit', function() { ratingHelper.submit($(this).rateit('value'));
});
I get the error ".rateit is not a function". I get the same error when using
$('.rateit').bind('rated', function() { ratingHelper.submit($(this).rateit('value')); });
The function to call looks like
var ratingHelper = function(){
};
ratingHelper.prototype = {
submit: function(v){
...
Well I am new to JS/jQuery and totally helpless. I would appreciate any help very much. Thanks in advance!
EDIT
Oh man ... I had the jquery.js imported TWICE :-( sorry for bothering you and thanks for your help!!
$(document).on('event', 'element', callback);
event: name of event run
element: elements of trigger
callback: function run after trigger
In your case -> '.rateid' is class name in DOM, and in this -
$('.rateit').bind('rated', function() {}); you not pointing at the item
Another question on stackoverflow pointed out that it should be possible to trigger an event on all listning objects using:
$.event.trigger('customEvent');
However this does not seem to work for me in an example like:
$('body').bind('customEvent', function(){ alert('Working!'); });
Am I doing something completely wrong, or has this great functionality been disabled?
It looks like that functionality has been removed. Browsing through the tags I managed to find this TODO in v1.8b1:
// TODO: Stop taunting the data cache; remove global events and always attach to document
And it was removed as of v1.9.0.
There is nothing stopping you from implementing it based on the old source code here (v1.6.2), but it looks like it was doing naughty things talking to jQuery.cache so it's probably best to live without it or come up with another solution.
$('*').trigger('customEvent');
Perhaps? (jsFiddle)
Or a more efficient approach of keeping track of each subscription and calling .trigger() on that.
jsFiddle
var customSubs;
$.fn.subscribeCustom = function (fn) {
this.on('customEvent', fn);
if (!customSubs)
customSubs = this;
else
customSubs = customSubs.add(this);
};
$('span').subscribeCustom(function () {
alert('span!');
});
$('div').subscribeCustom(function () {
alert('div!');
});
customSubs.trigger('customEvent');
I know this subject has been already discussed in similar topics, but none of the solutions I could find can help me understand the issue I have.
Here is my simplified class and its the usual was I define them.
BottomNav = function() {
this.init();
}
$.extend(BottomNav.prototype, {
init: function(){
this.insue = false;
$(".up").click($.proxy(function () {
var thisinuse = this.inuse;
if(this.inuse===false) {
this.inuse = true;
this.moveSlider('up');
}
},this));
},
moveSlider: function(d){
//some instructions
alert('move slider');
}
});
$(document).ready(function() {
new BottomNav();
});
In FireBug on the breakpoint inside the click event this.inuse is undefined! (this is my problem), my scope looks good on the watch (right panel of firebug), this.insue is false as it should be - sorry I cannot post images yet!
I would be grateful of someone might help identifying this very strange behavior.
I tried some staff like putting the click event definition inside another function but it does not work either. I tried different ways of bindings and it does not work too.
However the below example is working on a number of other classes I made. I could access class scope from events, effects.
It's just a typo:
this.insue = false;
Change insue to inuse and the property will be there :-)
Apart from that, the variable thisinuse is quite superfluous in here. And change the condition to if(! this.inuse) instead of comparing to booleans…
this.inuse can be assigned to a variable out side your click event handler and use the variable inside the handler.