有人在使用 rx.jquery 吗？
Posted
技术标签:
【中文标题】有人在使用 rx.jquery 吗？【英文标题】：Is anybody using rx.jquery? 【发布时间】：2013-10-14 12:35:46 【问题描述】：尝试使用 RxJS，特别是使用 rx.jquery 来弄湿我的脚。我找到了一个小教程here 并尝试将其设置如下。它应该接受您输入的内容并提供从 Wikipedia 中提取的建议。对 Wikipedia 的调用成功（我在 Chrome 的网络调试窗口中看到），但应用程序给了我一个错误：
Uncaught TypeError: 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>
【问题讨论】：
这是我对 Bacon.js 的 5 分钟转换。似乎工作。 jsfiddle.net/T6Xtv 不错。也许我只需要学习培根而不是 Rx。 我用最新版本的 Rx 测试了这段代码，它工作正常（除了 $.each，它会抛出异常）。我唯一能想到的就是其中一个 Rx 库没有正确加载，或者您可能使用的是旧版本，没有您尝试使用的功能之一。 没有堆栈跟踪，很难具体说明，但是当 RxJS 期望 【参考方案1】：您似乎在这一行有错误：
$.each(data[1], function (_, text) //...
必须是：
$.each(data.data[1], function (_, text) //...
匹配传入的数据。这是工作示例：
$(function run()
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.data[1], function (_, text)
$('<li>' + text + '</li>').appendTo(selector);
);
,
function (e)
console.debug("ERROR!", e);
selector.empty();
$('<li>Error: ' + e + '</li>').appendTo('#results');
);
);<!DOCTYPE html>
<html lang="en">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.js"></script>
<title>Reactive Elements</title>
</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>
</body>
</html>注意： 我的示例使用了更新的 jQuery 版本（2.1 与 1.8），但是我已经进行了一些测试，它似乎不会导致问题。
【讨论】：
以上是关于有人在使用 rx.jquery 吗？的主要内容，如果未能解决你的问题，请参考以下文章
有人在 Visual Studio 中使用“数据库项目”吗？
有人在同一台机器上同时使用Tortoise Git和Subversion吗？