I wanted to know if I am doing things in a correct way in order to avoid memory leaks.
So, I have an iFrame inside a Backbone view. On click of some elements inside of that iframe I want to execute some functions inside the view.
For example
Let's say that, there is a div element inside that iFrame and want to change color of that div on click of that div.
So inside afterRender() hook I've added event binding like below:
this.$('#myframe').contents().find('body')
.on('click', '#divSample',
$.proxy(function(evt){
//change color
this.showSettingsPopup();
}, this)
);
So how should I go about unbinding events or what other things should be done in order to avoid memory leaks.
Currently in dispose method I'm detaching events.
Related
i have a map on my page with maptype control button. When initializing the map i add a css style(highlighting the current active map type, like "Map" or "Satellite")to the button.
When resized, the map kind of reloads and the button css disappears, so i have to wait for the resize to end and reapply css style on the button.
In the end it just looks weird, because the map loads and the button has default color, after 2 seconds (i use settimeout) the button is applied the css again. How can this be done so the button gets the css before map loads and also keep that css.
Should i use a callback here and would that make a difference?
As mentioned in Custom Controls, few rules are necessary to create your own custom control. The following are the guidelines which also acts as best practice:
Define appropriate CSS for the control element(s) to display.
Handle interaction with the user or the map through event handlers for either map property changes or user events (for example, click events).
Create a element to hold the control and add this element to the Map's controls property.
To know more about these concerns, please go through the discussion and sample codes in the given documentation primarily in the following:
Drawing Custom Controls
Handling Events from Custom Controls
Positioning Custom Controls
A Custom Control Example
Adding State to Controls
I need to completely initialize a custom component in my Flex app (i.e. I should be able to access it from action script and get its properties and its children etc), But I do not want to add it to the display or make it visible.
I have tried to add it to my visible component, but keep it visible, but often many of its properties are set only when it is drawn, so i don't get what i need.
Is there a way to add a custom component to some sort of 'Virtual' display, that is not visible to the user?
You could add the component to an invisible Sprite - that way the component itself could both be on the stage and have its own visible property set to true.
Did you try using initialize()? After a view is added to the display list, the initialization stage begins. Calling initialize() before addChild() should let you initialize the view without needing to first add it to the stage.
For more info visit:
http://flexscript.wordpress.com/2008/10/24/flex-component-lifecycle-and-flex-component-framework/
http://blog.deadinkvinyl.com/2008/10/05/flex-3-addchild-and-initialize/
Not sure if possible without adding it to the display list, although I'd wish it were to some extent.
I once had to make custom drag proxy, which didn't work with the real component, because of some weird skinning issues. So instead I had PopupMananger add a box as a popup, added my component to the box, called validateNow on the component, drew it in a bitmap data, removed the popup, and used the bitmap data as the proxy.
So what you were trying was missing a call to validateNow most likely.
I am looking to control the visibility of a div on one page from a toggle button on an admin page. I have seen many examples of this being done on the same page but none that explain what it would look like to have this done from another page.
There are a number of ways to handle this. You should research what you want to do and then decide on a method that works best for you.
Personally I would look at a server-side implementation. In this way you can control the output to the client. You can use session variables for example. How this is done will depend on what language you are using.
If you only want a javascript solution then I can think of two options. First is to use cookies. You can then read the cookie and show/hide the div based on the value. This is what I would do.
Second you can pass in a querystring parameter and read it on the other page. Then hide/show your div. http://mysite.com/?div=hidden
If the admin page opened the child page using JavaScript then you can assign the window to a variable and control the contents through that variable. Like so:
var childWindow = window.open('some URL', options);
// now toggle the div in the child
var childDiv= childWindow.document.getElementById('your_div_id');
$(childDiv).toggle();
Can anyone think of a (preferably quick) way to move the data() attached to a DOM element to a new instance of itself?
The lightbox plugin I'm using deletes and re-appends and element to the page in order to display it in the lightbox (to aviod the multiple-ids issue that ASP.net has), and obviously the .data() that is attached to the element is lost when this happens.
There's a relatively new overload for .clone() you can use to do this.
.clone(true) will copy the element with events and data intact.
Alternatively, change your plugin to use .detach() rather than .remove() which keeps data intact. From the docs:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
I want to change the view states in my flex app when it resizes in the browser window.
I have the swf embedded at 100% x 100%. So when the user resizes the window below a certain width, I want to switch to a different state. I tried adding an event listener like this, but it only fires the event when I resize the swf outside the browser, not inside. I used:
this.addEventListener(ResizeEvent.RESIZE, SizeChanged);
I want this to work within the browser. I even tried using fixed dimensions in the embed code, instead of percentages, but that didn't help either.
You want to add the listener to the stage.
this.stage.addEventListener( Event.RESIZE, resizeHandler ); //from your Main.mxml creationComplete handler
Or you can add a listener via:
Application.application.stage.addEventListener( Event.RESIZE, resizeHandler)
Also, keep in mind that this event fires a lot as the view is resizing, so you will want to account for that.