Кто-нибудь использует rx.jquery?

Попытка получить мои ноги влажными с RxJS, в частности с rx.jquery. Я нашел небольшой учебник here и попытался настроить его следующим образом. Он должен взять то, что вы набираете, и предлагать предложения, извлеченные из Википедии. Призыв к Википедии является успешным (я вижу в отладочном окне Network Chrome), но приложение дает мне ошибку:Кто-нибудь использует rx.jquery?

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

Я пробовал несколько версий JQuery (1.8.3, 1.10.2, 2.0. 3), и это не имеет никакого значения. Bootstrap, похоже, тоже не проблема. Я почти не упоминаю здесь rx.jquery (и для этого нет тега), поэтому я не знаю, может быть, это не готово к прайм-тайму или к чему. Я вытащил самые последние rx. * Libs, поскольку более старые из них давали мне разные ошибки.

Конечно, я не могу исключить, что я только что что-то испортил. Но это не выпрыгивает на меня.

<!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>

источник

2013-10-07 Roy J

Вот мое 5-минутное обращение к Bacon.js. Кажется, работает. http://jsfiddle.net/T6Xtv/ – raimohanska

Ницца. Возможно, мне просто нужно изучить Бэкона вместо Rx. –

Я протестировал этот код с последними версиями Rx, и он работает правильно (за исключением $ .each, который бросает исключение). Единственное, что я могу думать об этом, что одна из Rx libs загружается неправильно, или вы, возможно, используете более старую версию, которая не имеет одной из функций, которые вы пытаетесь использовать. –

Вы, кажется, тривиальный ошибку на этой линии:

$.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), однако я сделал некоторые испытания, и это, кажется, не вызывают проблем ,

источник

2015-02-13 10:09:00

Кто-нибудь использует rx.jquery?

ответ

Смежные вопросы