是否有人使用rx.jquery？

試圖讓我的腳溼潤與RxJS，特別是與rx.jquery。我發現了一個小教程here，並試圖按如下方式進行設置。它應該採取你輸入的內容，並提供建議，從維基百科拉。維基百科的調用是成功的（我在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庫中的一個沒有被正確加載，或者你可能正在使用的舊版本沒有你正在嘗試使用的某個函數。 –

你似乎有這條線上一個簡單的錯誤：

$.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 VS 1.8），但我已經做了一些測試，它似乎並沒有引起問題。

來源

2015-02-13 10:09:00

是否有人使用rx.jquery？

回答

相關問題