剔除JS很好地处理棘轮和push.js，直到我添加了一个数据转换。

Question

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

我在StackOverflow上找到了一个很好的解决方案，只需为push事件添加一个事件侦听器即可。我修改了它，以便它可以跨多个页面加载任何脚本，因此它可以处理外部脚本文件：

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页面中，脚本被赋予类和id标记，因此它们可以处理上面的内容：

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

注意，Knockout绑定必须发生在一个特定的名为DOM元素上，这样才不会混淆：

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

我们使用cleanNode来避免“已经绑定”的错误。

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

然而，当链接被赋予一个过渡时：

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

然后，它用“无法读取未定义的属性'nodeType‘来结束。我曾经想过，这可能只是等待转换完成的问题，但是即使我用：

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

没什么用。

如有任何建议或协助，将不胜感激！我真的不需要“推送”页面，如果我不能使用过渡，所以我希望有人会有最后的钥匙，使这一切工作！

更新:发生错误是因为使用转换时的"document.querySelectorAll“调用使用的是当前文档，而不是正在推送的文档。此外，使用"webkitTransitionEnd“作为我的事件也同样有效，但这并不能解决文档问题。因此，我可以使这个工作，但只为一个转换-现在我没有一种方法来加载文档。理想的情况下，一个解决方案，无论一个链接是否使用转换，是我正在寻找的。

Answer 1

棘轮和淘汰赛的结合可能会在未来几个月里受到欢迎，所以我希望其他人能找到这个解决方案。

要组合Ratchet.js和Knockout.js库，只需要处理一个事实，即Ratchet.js (通过Push.js)将尝试管理页面转换。在过渡期间，目标页面上的JavaScript --包括Knockout --将不会运行，除非您具体地实现了这一点。这就是这个解决方案所做的:它使加载和运行您的Knockout JavaScript代码成为可能，即使棘轮正在管理页面转换。

在我的解决方案中，我们总是将JavaScript放在一个单独的文件中，并实现禁止在页面上运行任何JS代码的内容安全策略。它只是良好的安全卫生，有助于减少XSS攻击的攻击面。因此，下面的解决方案假设JS位于一个单独的文件中，2)假设HTML和JS文件的名称和路径完全相同--除了扩展名和路径(类似于将.js文件视为ASP.NET代码)。

在你的“根”页面上--在你的移动web应用程序中启动你与其他页面的所有交互，放置以下功能。当棘轮加载相应的.js文件时，它将加载适当的.html文件：

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

请注意，您必须将Knockout绑定应用到HTML页面中的命名和唯一div (通常是位于棘轮.content div下面的div)。这仅仅是因为每个页面加载都必须将其Knockout绑定应用于正在加载的HTML。

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

更新:我发现当页面从历史堆栈中被推送和弹出时，这个解决方案会变得“混乱”。我已决定不使用它，虽然它似乎在那里大约97%。如果任何人有任何改进，这将使这完全可靠，我都是耳朵！