javascript 如何使用棘轮启用 push.js ajax 内容加载器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14573215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to enable push.js ajax content loader with ratchet
提问by SeanPlusPlus
i am trying to implement the push.js engine from ratchet:
我正在尝试从棘轮实现 push.js 引擎：
http://maker.github.com/ratchet/#push
http://maker.github.com/ratchet/#push
i downloaded the ratchet files from here:
我从这里下载了棘轮文件：
http://maker.github.com/ratchet/ratchet.zip
http://maker.github.com/ratchet/ratchet.zip
and am using apache to serve all js, css and html. all files are in the same directory.
并且正在使用 apache 为所有 js、css 和 html 提供服务。所有文件都在同一目录中。
here is my one.html file:
这是我的 one.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">one.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="two.html">
<strong>two</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is my two.html file:
这是我的 two.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">two.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="one.html">
<strong>one</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
how do i link these two files together?
我如何将这两个文件链接在一起？
it looks like push.js is included but when i clicking on the a href's does nothing.
看起来 push.js 被包含在内，但是当我点击 a href 时什么也不做。
i feel like i am missing something glaringly obvious about this implementation.
我觉得我错过了关于这个实现的一些明显的东西。
thanks for the help.
谢谢您的帮助。
回答by doug
Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.jsshould do the trick.
Ratchet 处理触摸事件，而这些事件在您的浏览器中不可用。在 Chrome 中，转到 chrome://flags/ 并启用“强制启用触摸事件”。这应该可以解决浏览器开发的问题。如果你想让这个在没有标志的桌面上工作，你将需要一个 js 框架来将触摸事件转换为指针事件。像https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js这样的东西应该可以解决问题。
回答by ZenBalance
Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.
Ratchet 在移动设备上使用与桌面浏览器中使用的指针事件不同的触摸事件。
You can use the Chrome flags as mentioned in earlier answers or your can use @fat's fingerblast.js that converts touch events to pointer events.
您可以使用前面答案中提到的 Chrome 标志，也可以使用@fat 的fingerblast.js 将触摸事件转换为指针事件。
The fingerblaster.js file can be found here: https://github.com/stephanebachelier/fingerblast.js
可以在此处找到fingerblaster.js 文件：https: //github.com/stephanebachelier/fingerblast.js
IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):
重要提示：为了启用 Fingerblaster.js，您需要在 body 元素的末尾包含一个如下所示的脚本（一旦您的 html 内容已加载）：
<script type='text/javascript'>
var fb = new FingerBlast ('body');
</script>
This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').
这将创建一个新的 FingerBlast 对象并在 html 文档的主体上设置侦听器（您可以将任何 css 选择器字符串替换为 'body'）。
回答by chachra
I asked the same question. Seems like it only works on ios / phones, not on the web browser.
我问了同样的问题。似乎它只适用于 ios / 手机，而不适用于网络浏览器。
回答by Mati Tucci
I found that Ripple Emulatorworks great with this "issue" (I think only is available on Chrome)
我发现Ripple Emulator可以很好地解决这个“问题”（我认为仅在 Chrome 上可用）
It's nice because you don't need to add another js library
很好，因为你不需要添加另一个 js 库
回答by TheBrockEllis
Modern Firefox browsers have a web developer feature called "Responsive Design View". It allows you to view a web page in a smaller viewport to simulate use on a phone/tablet. It also allows you to simulate touch events. I found it particularly useful when working with Ratchet on a web app.
现代 Firefox 浏览器有一项名为“响应式设计视图”的 Web 开发人员功能。它允许您在较小的视口中查看网页以模拟在手机/平板电脑上的使用。它还允许您模拟触摸事件。我发现在 Web 应用程序上使用 Ratchet 时它特别有用。
In Firefox, you can enable the Responsive Design View by going to Tools -> Web Developer -> Responsive Design View or using the hotkeys "option + command + m".
在 Firefox 中，您可以通过转到 Tools -> Web Developer -> Responsive Design View 或使用热键“option + command + m”来启用响应式设计视图。
More information on the Responsive Design View can be found here.
可以在此处找到有关响应式设计视图的更多信息。
回答by joseadanof
You can download Chrome Canary and with Developer Tools click over Phone icon ( first one ) then select which mobile phone you want to emulate, you can even use Responsinator.com.
您可以下载 Chrome Canary 并使用开发人员工具单击电话图标（第一个），然后选择要模拟的手机，您甚至可以使用Responsinator.com。
PushJS is embedded into ratchet.js.
PushJS 嵌入到ratchet.js 中。
回答by dbKooper
Use FingerBlast. Tried Chrome, Safari and it worked.
使用 FingerBlast。尝试了 Chrome、Safari 并且它奏效了。
https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js
https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js
回答by diegodalbosco
On Google Chrome you can use the developer console and emulate a mobile device with touch events https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events
在 Google Chrome 上，您可以使用开发者控制台并通过触摸事件模拟移动设备 https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events
