Ratchet Push.js 不推送答案

【问题标题】：Ratchet Push.js Not PushingRatchet Push.js 不推送
【发布时间】：2014-12-12 23:13:22
【问题描述】：

我在 CodeIgniter 之上构建了一个 PHP 应用程序，该应用程序通过将控制器移动到控制器（.php 文件）而不是从一个静态页面移动到另一个静态页面（.html 文件）来工作。

问题：链接无法正常工作。

我不确定这甚至是问题，But I've gone through the docs 与源代码相比，它似乎是唯一的例外 - 我正在调用 .php 文件而不是 .html 文件。

在你问之前 - 在我的系统上，booknav 是一个可行的控制器，单击它会加载一个可行的视图。

另外 - 我可以看到这里的 sn-p 确实有效。我正在尝试调试这个 - 这里的 sn-p 怎么会发送一个链接，而我服务器上的等价物却没有？

这是我最终的 HTML 文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Project</title>
  <!-- Including Ratchet CSS + JS + Custom CSS !-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-status-bar-style" content="black">
  <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.js"></script>
</head>

<body>
  <header class="bar bar-nav">
    <h1 class="title">Select Your Book</h1>
  </header>
  <div class="content">
    <div class="card">
      <ul class="table-view">
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 1</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 2</strong></span>
          </a>
        </li>
        <li class="table-view-cell">
          <a class="navigate-right" href="booknav" data-transition="slide-in">
            <span><strong> Book 3</strong></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

【问题讨论】：

您的意思是该示例发送了正确的请求，但它在本地计算机上不起作用？不知道，看这个stackoverflow.com/questions/23291727/…
可能是问题。明天晚些时候会检查它。
请注意，如果对您有帮助，我会将其作为答案发送。
首先让我确定它工作正常。
他说他正在使用 php 文件，因此将其作为文件加载可能不是问题。您能否提供有关此错误的更多详细信息？

标签： javascript ratchet-2 ratchet-bootstrap

【解决方案1】：

如果您单击该链接并且浏览器导航到 http://yourwebserver/projectroot/booknav 而不是使用过渡动画交换页面内容，那是因为您没有在浏览器中模拟设备。 push.js 没有被触发，因为touchend 事件没有被触发。使用 chrome 开发者工具，或安装涟漪。

ratchet 为 window touchend 事件添加了一个处理程序，拦截导航并将整个目标页面与 DOM 分开加载，然后将新内容与 dom 上的内容容器交换。

运行 ratchet.js 的一些一般要求

1) 测试在网络服务器中运行或部署到设备的应用程序。
2）您必须使用模拟器来触发触摸事件（或在设备上运行）
3）页面内容需要格式良好。它应该在每个页面上具有匹配的页眉、页脚、导航、内容元素。您的链接上不应缺少data-transition 标签。

您可以通过启用开发人员工具和启用设备模拟或使用 hammer.js touch emulator 之类的库来触发 chrome 中的触摸事件。如果您触发点击，您将绕过 push.js，浏览器将导航您不想要的内容。

如果内容格式不正确，浏览器将重新加载页面，无论当前位置是什么，这不是您想要的。

【讨论】：