Knockout JS与Ratchet和push.js配合得很好，直到我添加了一个数据转换

我正在使用Ratchet.js/push.js库来创建移动web应用程序的UI。在这个库中，链接是通过"push "要加载的文件到"push "来处理的。content"DOM元素，而不是加载整个页面。但是，push.js不加载加载页面时发现的任何脚本-这禁用了Knockout.js代码。

我在StackOverflow上找到了一个解决方案，它工作得很好-只需为推送事件添加一个事件侦听器。我修改了它，使它可以加载任何脚本跨多个页面，所以它与外部脚本文件:

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 < 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 ...
  }
});

在目标HTML页面中，脚本被赋予class和id标签，因此它们可以使用上面的内容:

    <script src="Challenge.js" class="js-custom" id="challenge.js"></script>

还要注意，Knockout绑定必须发生在特定的命名DOM元素上，这样才不会混淆Knockout:

ko.cleanNode($("#ChallengePage")[0]);
ko.applyBindings(challengeFn,  $("#ChallengePage")[0]);

我们使用cleanNode来避免"已绑定"错误。

OK !所以所有这些都很好，我希望那些正在努力解决这个问题的人会发现它很有用。

然而，当给链接一个过渡时:

<a href="challenge.html" data-transition="slide-in">....

然后它以"Cannot read property 'nodeType' of undefined "中断。我曾认为这可能只是等待转换完成的问题，但即使我用:

替换脚本的eval

scriptContents = script;
setTimeout(function () { eval(scriptContents); }, 1000);

没用的

任何建议或帮助将不胜感激!我真的不需要"推送"页面，如果我不使用过渡，所以我希望有人会有最后的关键，使这一切工作!

更新:发生错误是因为"文档。使用转换时使用当前文档而不是被推送的文档时调用querySelectorAll"。此外，使用"webkitTransitionEnd"作为我的事件也可以工作，但这并不能解决文档问题。因此，我可以做到这一点，但只适用于单个过渡—现在我没有办法获得正在加载的文档。理想情况下，无论链接是否使用过渡，都可以工作的解决方案是我正在寻找的。

window.addEventListener('push', function (params) {
    var targetPage = params.target.document.baseURI.replace(".html", ".js");
    $.getScript(targetPage)
        .done(function (script, textStatus) {
            eval(script);
        })
        .fail(function (jqxhr, settings, exception) {
            alert("Error loading script: " + exception);
        });
});

ko.cleanNode($("#DivPageName")[0]);
ko.applyBindings(KnockoutFn, $("#DivPageName")[0]);