个人中心
gpt4 book ai didi

jquery - 有人使用 rx.jquery 吗？

转载 作者：行者123 更新时间：2023-12-01 08:01:59 25 4
gpt4 key购买 nike

尝试使用 RxJS，特别是 rx.jquery。我找到了一个小教程here并尝试按如下方式设置。它应该接受你输入的内容并提供来自维基百科的建议。对维基百科的调用成功(我在 Chrome 的网络调试窗口中看到)，但应用程序给了我一个错误:

Uncaught TypeError: Object #<Object> has no method 'subscribe'

我已经尝试了几个版本的 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>

最佳答案

您在这一行似乎有一个错误:

$.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)，但是我已经做了一些测试，它似乎不会引起问题。

关于jquery - 有人使用 rx.jquery 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19233282/

25 4 0
文章推荐： java - boolean 值始终输出 true
文章推荐： .net - 为什么 asmx Web 服务有标记文件？
文章推荐： jquery - 单击 Twitter 按钮时获取数据属性。
文章推荐： Java - 就性能而言，哪个集合最适合这种情况？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com