title: Knockout JS plays nicely with Ratchet and push.js until I add a data-transition
body: <p>I am using the Ratchet.js/push.js library to create the UI for a mobile web app. In this library, links are handled by "pushing" the to-be-loaded file into the ".content" DOM element rather than loading the entire page. However, push.js does not load any scripts it finds when loading a page - which disables my Knockout.js code.  </p>
  
  <p>I found a solution here on StackOverflow that works pretty well - just add an event listener for the push event.  I modified it so that it can load any script across multiple pages and so it works with external script files:</p>
  
  <pre><code>window.addEventListener('push', function () {
    var scriptsList = document.querySelectorAll('script.js-custom');  // Add a "js-custom" class to your script tag
    for (var i = 0; i &lt; scriptsList.length; ++i) {
        // Handle scripts in separate files by assigning the script file name to its id.
        // We save it in a variable because the ".done" callback is asynchronous.
        scriptName = scriptsList[i].id;  // IMPORTANT: Only one loadable script per page!
        $.getScript("/path info here/" + scriptName)
          .done(function (script, textStatus) {
              eval(script);
          })
           ... error handling ...
    }
  });
  </code></pre>
  
  <p>In the target HTML page, scripts are given class and id tags so they work with the above: </p>
  
  <pre><code>    &lt;script src="Challenge.js" class="js-custom" id="challenge.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Note, too, that Knockout bindings have to occur to a specific named DOM element so that knockout doesn't get confused: </p>
  
  <pre><code>ko.cleanNode($("#ChallengePage")[0]);
  ko.applyBindings(challengeFn,  $("#ChallengePage")[0]);
  </code></pre>
  
  <p>We use cleanNode to avoid the "already bound" errors.</p>
  
  <p>OK!  So all this works great and I hope that someone who is struggling with this finds it useful.</p>
  
  <p>HOWEVER, when the link is given a transition:</p>
  
  <pre><code>&lt;a href="challenge.html" data-transition="slide-in"&gt;....
  </code></pre>
  
  <p>Then it breaks with a "Cannot read property 'nodeType' of undefined.  I had thought that maybe it was just a problem of waiting for the transition to finish, but even if I replace the eval of the script with: </p>
  
  <pre><code>scriptContents = script;
  setTimeout(function () { eval(scriptContents); }, 1000);
  </code></pre>
  
  <p>it doesn't help.</p>
  
  <p>Any advice or assistance would be greatly appreciated!  I don't really need to "push" pages if I don't get to use the transitions so I am hoping that someone will have the last key to making this all work!</p>
  
  <p>UPDATE: The error was occurring because the "document.querySelectorAll" call when using a transition uses the <em>current</em> document rather than the document being pushed.  Also, using "webkitTransitionEnd" as my event works as well but this doesn't fix the document issue.  Thus, I can make this work, but only for a single transition - now I don't have a way of getting the document being loaded.  Ideally, a solution that works whether a links uses a transition or not is what I am looking for.</p>