My example is here:
http://codepen.io/anon/pen/DCfkw
if you open up dev tools/console, you will see that all Ractive views go through their teardown cycle.
However, if you transpose lines 8 and 9 in the html panel (basically, put the each for model.grandChildTitles inside the closing the div tag), you will see that only the child goes through its teardown cycle.
I've narrowed it down to ractive.js line 11100 (v0.6.0, coming out of bower's -> ractive/ractive.js, if it makes any difference, though I see the same thing at http://cdn.ractivejs.org/latest/ractive.js - serving 0.6.0 - line 11100) -
It would appear that when you're tearing down an element, if it has a fragment, ractive calls this.fragment.unrender( false ), automatically assuming that the fragment is not a view unto itself which should also be torn down.
Am I missing something here? At my first glance, it seems like a memory leak and something that would prevent me from doing any onteardown-type actions. Am I just doing it wrong?
Related
Hi everyone,
reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.
Here's my Fiddle
the fiddle is nicely commented, please let me know if anything's unclear
By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.
Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.
To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.
This works pretty well, except for...
The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.
I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.
What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.
Reproducing the 'bug':
App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.
Is this the expected behavior?
I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.
Thanks!
Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.
It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.
The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:
<ng-view ng-animate="transitionClass"></ng-view>
then the CSS selectors just collapse into single classes:
.LR-enter-active {
...
}
(where transitionClass is still being set on the $rootScope in the locationChangeStart:)
$rootScope.$on("$locationChangeStart", function (event, next, current) {
...
http://jsfiddle.net/9XPVX/4/
How can I know when the dom node I care about in a template is rendered. I would like to be able to select it with jQuery or template.find and either modify it or attach callbacks? I've been using Template.templateName.rendered, but it's hit or miss. Sometimes the element I want has not been inserted in the dom even though the template is rendered. If I setTimeout within template.rendered for a 2-3 seconds and then try to select an element it is almost always there, but this obviously a kludge.
Template.templateName.rendered = ->
# This is a kludge!
wait 2000, =>
$(window).resize =>
# Neither of these selectors find anything without the wait
$iframe = $(this.find('#embed-html iframe'))
width = $('#embed-html').innerWidth()
resizeIframe($iframe, width)
$(window).resize()
The rendered event is the correct way of doing this and will be fired each time the template is inserted into the DOM. Have you tried doing this without the iframe? It's possible the iframe is messing things up, in which case you could try testing the iframe with a local document source to see if loading speeds of the iframe are affecting how the find method returns elements.
You definitely shouldn't have to wait for anything before talking to the DOM, so something weird is happening.
I have a main application calling several ViewStack states, each with popup windows. If I don't open any popup windows, I can move between states fine. If I open a popup window then try to change the state using currentState=... I get the error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at spark.components::Scroller/focusInHandler()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\Scroller.as:2139]
at flash.display::Stage/set focus()
at mx.core::UIComponent/setFocus() [E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:9905]
...
I see others having the same problem, for example here:
http://forums.adobe.com/thread/1031531
http://forums.adobe.com/message/2767130
http://forums.adobe.com/message/3448443
http://forums.adobe.com/thread/655749?tstart=-1
http://forums.adobe.com/thread/801149
http://flex4examples.wordpress.com/2011/05/05/skinnabletextbase-focusmanager-runtime-error-popup/
http://bugs.adobe.com/jira/browse/SDK-32036?page=com.atlassian.jira.plugin.system.issuetabpanels%3Aall-tabpanel
But I haven't figured out how to implement the recommended solution. It sounds like I should just include:
import mx.managers.PopUpManager; PopUpManager;
inside my main application and it should work, but it doesn't work for me.
My application has each view state in a different file, each defined using <views:View>. Also, all of the popups are separate files defined as <s:TitleWindow>. Each file includes this line:
import mx.managers.PopUpManager;
I wonder if this means each file is using a different popup manager(?), when it's a singleton and only one should be used for the whole app (how to set that up?).
The code I use to call a popup is:
var _popupName:MyTitleWindowFileName = MyTitleWindowFileName(
PopUpManager.createPopUp(this, MyTitleWindowFileName, true));
_popupName.addEventListener(MyAppController.CLOSE_POPUP,onClosePopUp);
PopUpManager.centerPopUp(_popupName); // call popup
Note that when the main application (the one defined as <s:Application>) runs, the ViewStack states have not been loaded yet (since they get loaded when they are used the first time). Not sure if that has any cause/effect here.
I've tried to follow Adobe's example code in the "Passing data to and from a Spark pop-up window" section here:
http://help.adobe.com/en_US/flex/using/WS6c678f7b363d5da52e8f1ca1124a0430dcf-8000.html#WS6c678f7b363d5da52e8f1ca1124a0430dcf-7ffe
Any ideas much appreciated.
Based on your comments, it seems like the error occurs because the focus remains in the popup. I would expect the PopUpManager and FocusManager classes to handle this better.
One thing I can think of is that the FocusManager may be trying to handle this. But since the state changes, the item that originally had focus (in the view stack child, before the pop up was opened) may no longer be there when the view state changes. Just a hunch, w/out seeing your code.
Here's some things you can do to either work around the problem (or better) further debug it to understand what is happening:
Use FocusManager.setFocus() to move the focus back to an object in the view stack child before closing the pop up
Use FocusManager.getFocus() to debug and see where it thinks the focus is at various stages (before opening popup, before/after changing state, and before/after closing pop up).
It appears this is the situation I'm experiencing:
Adobe Air: scroller throws error when changes focus between different applications
It's an Adobe bug. Solution from Adobe is:
This bug is easily fixed by changing Scroller to do a null pointer check on focusManager before using it.
which is what the first link above attempts to do.
Another link: http://forums.adobe.com/message/3812805
I have an Ajax enabled website, with some calls to the Script Manager to set history points like so:
if (uxScriptManager.IsInAsyncPostBack)
{
uxScriptManager.AddHistoryPoint("x", taxid.ToString());
}
This works just fine 90% of the time.
However, about 10% of the time, the history points stop being set. This seems to happen when I've clicked around a bit and then start using the back button to go back pretty far (usually 6 or 7 steps in the history).
Has anyone else noticed/seen this behavior? The code I've got that picks up the state information from the history points to rebuild the page seems to work fine.It's just sometimes the script manager seems to forget to set the history point.
EDIT
I've noticed some strange behavior with the script manager - after the third or the fourth click back, is seems to break and the Ajax calls no longer work. The user needs to reload the page in order for the history to start working again. Anyone seen this type of behavior? (I'd think if I wasn't doing it right, it wouldn't work at all...)
Below, you'll see a snapshot of Firebug's Net Panel/Tab after I clicked a submit button on a form in an ASP.NET web application, to the time the response came back from a full page postback. (Actually I don't know when Firebug's NET panel timeline stops... I'm guessing it's when the page finally renders... please tell me if you know.)
I'd like to understand what each interval below means (1-10). If each vertical line means something different, then just say "1-2" or "2-3" to indicate the vertical line. I'm noticing that the times from the itemized URL lines in the timeline don't match the total time. Where did this time go? How can I pinpoint the slowness?
My goal is to find out how I can speed up this page. But in the mean time, I'd like to understand what's happening in the page first. I'm a bit concerned about #7 and #10. That's what I'm primarily trying to figure out right now.
FYI: The image is very small in the thread's question, so if you open the image in a new tab (or window) it will be easier to see.
If I haven't provided enough information, please ask.
==================
9/20/2011 update # 12:49am
Removed the iFrame, but that did not help performance.
OK, in the first image you've got persist turned on which means Firebug will show the requests for more the one page i.e. doesn't clear down one reload (http://getfirebug.com/wiki/index.php/Net_Panel).
8 is the DOMContentLoaded event being fired which is the point the browser can start rendering the page
6 is the onload event firing
(Not sure what the other intermediate lines are)
7 & 9 are the UI thread being blocked by the parsing / execution of javascript
Have a read of this Chapter from #souders book on blocking Javascript for an explanation (http://books.google.co.uk/books?id=E7p-07kNfXYC&lpg=PR15&ots=UMcnSGjhOr&dq=javascript%20blocking%20souders&pg=PA27#v=onepage&q=javascript%20blocking%20souders&f=false)