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

我正在使用 Ratchet.js/push.js 库为移动 Web 应用程序创建 UI。在这个库中，链接是通过将要加载的文件“推送”到“.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 元素上，这样淘汰才不会混淆：

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

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

好的！所以这一切都很有效，我希望那些正在为此苦苦挣扎的人发现它很有用。

但是，当链接发生转换时：

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

然后它会因“无法读取未定义的属性‘nodeType’”而中断。我原以为这可能只是等待转换完成的问题，但即使我将脚本的 eval 替换为：

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

这没有帮助。

任何建议或帮助将不胜感激！如果我不能使用转换，我真的不需要“推送”页面，所以我希望有人能拥有使这一切顺利进行的最后一把钥匙！

更新：发生错误是因为使用转换时的“document.querySelectorAll”调用使用current文档而不是被推送的文档。另外，使用“webkitTransitionEnd”作为我的事件也可以，但这并不能解决文档问题。因此，我可以完成这项工作，但仅限于一次转换 - 现在我没有办法加载文档。理想情况下，我正在寻找一种无论链接是否使用转换都有效的解决方案。

Ratchet 和 Knockout 的组合可能会在未来几个月内流行，所以我希望其他人找到这个解决方案。

要组合 Ratchet.js 和 Knockout.js 库，只需处理 Ratchet.js（通过 Push.js）将尝试管理页面转换的事实。在转换期间，目标页面上的 JavaScript（包括 Knockout）将不会运行，除非您专门执行此操作。这就是该解决方案的作用：即使 Ratchet 正在管理页面转换，它也可以加载并运行 Knockout JavaScript 代码。

在我的解决方案中，我们always将 JavaScript 放在单独的文件中，并实施内容安全策略，禁止任何 JS 代码在页面上运行。这只是良好的安全卫生，有助于减少 XSS 攻击的攻击面。因此，下面的解决方案 1) 假设 JS 位于单独的文件中，2) 假设 HTML 和 JS 文件具有完全相同的名称和路径 - 除了扩展名之外（有点像将 .js 文件视为 ASP）。 NET HTML 文件的代码隐藏）。

在您的“根”页面（启动与移动网络应用程序上其他页面的所有交互的页面）上，放置以下函数。每当 Ratchet 加载相应的 .html 文件时，它将加载适当的 .js 文件：

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（通常是位于 Ratchet .content div 正下方的 div）。这只是因为每个页面加载都必须将其 Knockout 绑定应用于正在加载的 HTML。

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

更新：我发现当页面从历史堆栈中推送和弹出时，这个解决方案有时会变得“混乱”。我决定不使用它，尽管它看起来大约有 97%。如果有人有任何改进可以使其完全可靠，我洗耳恭听！