I am using backbone and Marionette for my Application.I want to create my own event like If div innerHTML clears the event should be trigger.
html code :
<div id="firstDiv"></div>
While div clearing time, I want to unbind the view events.In my Application,we have Main button to go main page.This button common in every screen,So I written a code for this button,once use click on this button div clears and main page will be render,the problem was still the previous view events are listening.So How can I clear the previous View events.
can anyone help me.
Thanks.
You can't really do that, to the best of my knowledge. You can listen to events triggered by the browser (click, focus, etc.), and you can also listen or trigger events on Backbone/Marionette instances.
What you'd like to do is trigger an event on a specific DOM change, which you can't do. Instead, when you clear that div, you should trigger an event yourself and have your code listen for that event.
It is correct to say that you should be thinking about how you can capture this within the view logic, rather than listening to a DOM change.
That said, if you do think that listening to the DOM is the best approach, then this could be a good use case for a Mutation Observer. Explaining how is a little above and beyond, but there is a lot of good information on the MDN Dev page
If you are using Marionette, you should not worry about the previous view events. It automatically handles the Garbage Collections and unbinds the previous events. You have to make the application in such a style that when you render a View in a Region, it will bind the events to that, and when you click on button "Main" you should handle route to get the new View/stored View to be shown in that same region. So the old view will be removed automatically and the events will be also removed. Marionette is best at that part.
And if you have custom events using jQuery I suggest
Use Marionette View's events
OR
Use $(element).off("event").on("event", function(){});
Related
What is the best practice for handling links in a Backbone app?
a) Should each view listen to a click event for links rendered by itself?
b) Or should there be a global click event listener attached to, say, document, that intercepts all link clicks and executes Backbone.History.navigate with their href?
I have seen both approaches, is there a preferred one?
I think this depends on the application you are trying to write.
What I generally do is, if it's a list of items where the count is greater than 10 and each one of these items have click handlers, I put the click handler on the parent view or document view. If you only need 1 instance of the view with the click handler, then you needn't worry about delegating your events to the document/parent.
I have an app im building with phonegap.
I'm listening for touchstart/ touchend events to make it responsive.
Sometimes, the event listener for the touchend will fire, but then, for e.g, an input will focus afterwards as the click event is fired 300ms later.
an example is, i have a menu sidebar. each sidebar list item listens to the touchend event. on receiving the event, the sidebar closes and the relevant page is shown. however, if the relevant page contains a form element that is where the user had clicked for the sidebar list item, the form element will get focused.
what is the best way to stop this across the entire app? it happens in various scenarios which vary with different phones.
Ive tried things like stopPropagation etc but these only work ina few cases, and i need to have a generic cross-app solution rather than adding in for each function, if possible.
something like:
$('body').on('touchend', function(){
//stop any further touchends/ clicks from firing
//apart from the 1 i do want
})
You could try 'touchcancel' instead of 'touchend', see if it works :) good luck.
your app goes to fast ;)
EASY WAY:
just put a setTimeout(gotopage(),100)
on every button/menu action
HARD WAY:
If you really don't want to put a setTimeout, you should take a look to how bubbling works, problem is here
TIP:
Anyway to avoid the 300ms you should use the Fastclick of FTLABS :
https://github.com/ftlabs/fastclick
and the use click event, it will do the job for you (you will still have to use setimeout trick)
In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.
I thought it will be better to rephrase the whole question after gathering some information on how to resolve my problem.
The simple question now is how to create a custom event out of window.onhashchange functionality.
I wanted to do this because as you may know you cannot attach handler on javascript loaded content, you will be able to solve this by
$('parent').on('event', 'child', func) right? which is equivalent to jquery delegate functionality.
How can I create a custom event out of window.onhashchange
Ohhhh. Okay. Well, window is the only thing that it makes sense for hashchange to trigger on so I'm not sure why you would want event delegation. Listen to the window. When there is a hash change, do what you want to whatever HTML currently exists.
You actually can attach handlers to JavaScript-appended content. If it's in the DOM, it's something you can manipulate and listen for events on. The problem is when you replace the html content. The original dom node is gone so if for instance you had a click event, it's registered to a node that no longer exists.
But window can only be replaced by reloading the page and that's the only thing a hash change should be relevant to. Also 'hashchange' isn't a real DOM event. If it made sense for it to trigger on an element I'm not sure it would still bubble like an event like 'click' does.
Short version: I'm not sure you're having the problem you think you're having if you need something to happen on this 'hashchange' event.
I am in the process of creating a huge web application, with a JavaScript based UI, and many events generated continuously.
To avoid bad performance due to the huge amount of the event listeners needed, I of course opted to use a single event listener which will catch all the events generated from the children elements (event bubbling).
The problem is, this application is designed in such a way that one or more modules can be loaded into the main JavaScript library I'm coding (which is responsible for controlling the UI and every other aspect of the program). Of course every module should be completely independent from each other, so you can choose which methods to load, without affecting the general functionality of the library, only adding or removing features.
Since every module can operate in different DOM elements, I need to have at least a single event listener for each module, since two modules can listen for events generated by html elements placed in different DOM branches.
http://jsfiddle.net/YRejF/2/
In this fiddle for example, the first button will let the first paragraph trigger an event, and its parent will catch it. The second button will let the second paragraph fire the event, but the div listening for the same event won't catch it, because it's not fired from one of its sons.
So my question is: is it possible to have a single event listener, able to listen also to events triggered from elements that are not its sons (elements placed everywhere on the page)?
I was thinking about having a js object, or a dom node, which store the data of the element which triggered the event, and the event itself, then a general event will be fired on the global event listener (no matter where it's placed in the dom), and it will then read the data to discover which element generated which event, and act accordingly.
Any help or suggestion about better ways of achieving this?
jQuery has a special binder for this kind of cases: live(). It let's all events bubble to the document and then handles them accordingly. However, if you use div or other containers for different panels etc, maybe using delegate() makes more sense. Don't worry too much about the number of bound elements. Believe me, it will run as well with 50 binds or 10 delegates as it will with 1 live.