首页 / JAVASCRIPT / javascript-淘汰赛JS与Ratchet和push.js配合得很好,直到我添加了数据转换

javascript-淘汰赛JS与Ratchet和push.js配合得很好,直到我添加了数据转换

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-淘汰赛JS与Ratchet和push.js配合得很好,直到我添加了数据转换，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3643字，纯文字阅读大概需要6分钟。

内容图文

我正在使用Ratchet.js / push.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>

还要注意,敲除绑定必须发生在特定的命名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”调用使用的是当前文档,而不是被推送的文档.另外,使用“ webkitTransitionEnd”作为我的事件也可以,但是不能解决文档问题.因此,我可以完成这项工作,但只能进行一次过渡-现在我没有办法加载文档.理想情况下,我正在寻找一种无论链接是否使用过渡都可以工作的解决方案.

解决方法:

在接下来的几个月中,Ratchet和Knockout的组合可能会很流行,因此我希望其他人可以找到这种解决方案.

要将Ratchet.js和Knockout.js库组合在一起,只需要您处理Ratchet.js(通过Push.js)将尝试管理页面转换的事实.在过渡期间,除非您明确地做到了,否则目标页面上的JavaScript(包括Knockout)将不会运行.这就是该解决方案的作用：即使Ratchet管理页面转换,它也可以加载和运行您的Knockout JavaScript代码.

在我的解决方案中,我们始终将JavaScript放在单独的文件中,并实施内容安全策略,该策略禁止在页面上运行任何JS代码.它只是良好的安全卫生措施,有助于减少XSS攻击的攻击面.因此,以下解决方案1)假定JS位于单独的文件中,2)假定HTML和JS文件具有完全相同的名称和路径-除了扩展名(类似于将.js文件当作ASP一样). NET代码(用于HTML文件).

在“根”页面上(该页面开始与移动Web应用程序上其他页面的所有交互),放置以下功能.每当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);
        });
});

请注意,您将必须将敲除绑定应用于HTML页面中的一个命名且唯一的div(通常是一个直接位于Ratchet .content div下面的div).这仅仅是因为每次页面加载都必须将其Knockout绑定仅应用于要加载的HTML.

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

更新：我发现,随着从历史记录堆栈中推送和弹出页面时,此解决方案有时会变得“困惑”.我决定不使用它,尽管它似乎占那里的97％.如果任何人有任何改进都可以使之完全可靠,那么我将不胜感激！

内容总结

以上是互联网集市为您收集整理的javascript-淘汰赛JS与Ratchet和push.js配合得很好,直到我添加了数据转换全部内容，希望文章能够帮你解决javascript-淘汰赛JS与Ratchet和push.js配合得很好,直到我添加了数据转换所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/659519.html

来源：【匿名】