I’m currently working on some rather awesome stuff with SproutCore and it’s shiny new Template Views. They’re an excellent solution for the most part, but being only a few months old they’re still somewhat buggy.
Originally in sproutcore-1.6.0.beta.(1|3) the touch events in the template view didn’t bubble properly which prevented the iPhone view from scrolling at all. That’s been fixed in 1.6.0.rc.1, however I ran into a new issue. When the window orientation changes from portrait to landscape, or vice-versa, I change the classes on a couple divs so that I can show a UI that’s most appropriate for the perspective. This was working excellently until this morning. For whatever reason the view isn’t actually updating until I touch the screen. Obviously this isn’t good enough.
Fortunately, the fix, with props to Stoyan Stefanov, is rather simple in principle. I’ve simply added a helper function to my app that adds a junk style to a stylesheet.
bruteForceRepaint: function() {
var ss = document.styleSheets[0];
try { ss.addRule('.xxxxxx', 'position: relative'); }
catch(e) {}
}
There’s probably a better place to put this, but for now I’ve added it directly to the Application object itself. Then I simply call this within the statechart’s portrait and landscape events after the classes are updated. The whole snippet looks like:
Landscape: SC.State.design({
enterState: function() {
MyApp.LandscapeView.set('isActive',true);
MyApp.bruteForceRepaint();
}
I had initially written this up using Thomas Fuchs’ technique, but I found that it wasn’t reliable enough. Sometimes it worked, sometimes it didn’t and I don’t know why. The above script, while polluting the stylesheet, is far more reliable. I haven’t seen it fail yet.
