尝试使用 RxJS,特别是使用 rx.jquery 让我的脚湿透。我在这里找到了一个小教程,并尝试按如下方式进行设置。它应该接受您输入的内容并提供从 Wikipedia 中提取的建议。对 Wikipedia 的调用成功(我在 Chrome 的网络调试窗口中看到),但应用程序给了我一个错误:
未捕获的类型错误:对象 #<Object> 没有方法“订阅”
我已经尝试了几个版本的 jQuery(1.8.3、1.10.2、2.0.3),这没什么区别。Bootstrap 似乎也不是问题。我在这里几乎没有看到 rx.jquery 的提及(并且没有标签),所以我不知道它是否可能还没有为黄金时段做好准备或什么。我已经提取了最新的 rx.* 库,因为较旧的库给了我不同的错误。
当然,我不能排除我只是搞砸了一些东西。但它并没有向我跳出来。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reactive Elements</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Reactive Extensions <small>in JavaScript</small></h1>
</div>
<input id="textInput" type="text" class="form-control"/>
<ul id="results"></ul>
</div>
<script src="/lib/rx.min.js"></script>
<script src="/lib/rx.binding.min.js"></script>
<script src="/lib/rx.time.min.js"></script>
<script src="/lib/rx.jquery.min.js"></script>
<script>
$(function () {
var throttledInput = $('#textInput').
keyupAsObservable().
map(function (ev) {
return $(ev.target).val();
}).
filter(function (text) {
return text.length > 2;
}).
throttle(500).
distinctUntilChanged();
function searchWikipedia(term) {
return $.ajaxAsObservable({
url: 'http://en.wikipedia.org/w/api.php',
data: { action: 'opensearch',
search: term,
format: 'json' },
dataType: 'jsonp'
});
}
var suggestions = throttledInput.flatMapLatest(function (text) {
console.debug('Searching wiki', text);
return searchWikipedia(text);
});
var selector = $('#results');
suggestions.subscribe(
function (data) {
console.debug('Data!', data);
selector.empty();
$.each(data[1], function (_, text) {
$('<li>' + text + '</li>').appendTo(selector);
});
},
function (e) {
console.debug("ERROR!", e);
selector.empty();
$('<li>Error: ' + e + '</li>').appendTo('#results');
}
);
});
</script>
</body>
</html>