Mr. Darcy Murphy

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.