Rxjs - 沒有獲取可觀察到的dom元素的值

我試圖製作一個從輸入框搜索顏色數組的小部件。Rxjs - 沒有獲取可觀察到的dom元素的值

在我的搜索在我的js文件中的可觀察我引用輸入dom元素，我得到我的按鍵從。每當我嘗試獲取$ input的值時，我都會得到未定義的值。但是，當我進入控制檯時，我可以選擇元素並獲取值。這應該是更新值，以便發送到我的搜索功能的限制按鍵。目前，我將undefined發回給我的searchColors函數。

這將引發Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

我覺得我的$輸入這個代碼的主要錯誤。謝謝您的幫助！

的Javascript

var Observable = Rx.Observable; 
    var colors = ["AliceBlue",...,"YellowGreen"].map(function (n) {return n.toLowerCase()}); 
    var $input = document.querySelector("#bg-color-input"); 
    var $container = document.querySelector("#bg-color-container"); 
    var $results = document.querySelector("div#ac-list"); 
    var $clear = document.querySelector("#bg-color-clear"); 
    var $node, change; 

    function setBackground (color) { 
    this.style.backgroundColor = color; 
    } 

    function clearColors() { 
    while (this.firstChild) { 
     this.removeChild(this.firstChild); 
    } 
    } 

    function searchColors (substr) { 
    colors.forEach(function (color) { 
     if(color.indexOf(substr.toLowerCase()) > -1) { 
     var el = document.createElement('div'); 
     el.innerHTML = color; 
     el.style.backgroundColor = color; 
     el.className = 'color-node col-md-1' 
     $results.appendChild(el) 
     } 
    }) 

    $node = document.querySelectorAll(".color-node"); 

    change = Observable.fromEvent($node, 'click') 
     .map(function (e) { return e.target.innerHTML }); 

    change.subscribe(setBackground.bind($container)); 
    } 

    var search = Observable.fromEvent($input, 'keypress'). 
    throttle(20). 
    map(function (key) { return $input.value; }). 
    distinctUntilChanged(). 
    map(function (search) { searchColors(search); }); 

    var clear = Observable.fromEvent($clear, 'click'). 
    map(function (e) { return e }) 

    search.subscribe(searchColors.bind($results)) 
    clear.subscribe(clearColors.bind($results))

HTML

<div class="container"> 
    <div id="bg-color-container"> 
     <h1>Change the Background Color</h1> 
     <p> 
     By entering a valid named CSS color you can change the background color of this div. 
     </p> 
     <input type="text" id="bg-color-input"> 
     <button id="bg-color-clear">Clear</button> 
     <div class="row" id="ac-list"> 
    </div> 
    </div>

這裏是我的代碼jsbin http://jsbin.com/ravagi/edit?html,js,output

來源

2015-11-26 jmarthernandez

這是不能夠通過使用操作者do或console.log登記指令跟蹤操作鏈的執行進行跟蹤下來。通過這樣做，我發現：

你叫searchColors兩次。第二次傳遞的值將始終未定義，因爲您尚未返回map(function (search) { searchColors(search); });中的值，因此當您訂閱該流時，將獲得undefined。也許你在調試之後添加了代碼？
一旦你改正了這一點，你會看到$input.value仍然是undefined。這裏的問題是你在keypress上做出反應。你應該對keyup作出反應。在keypress時間，輸入框尚未用您的密鑰更新。

總之，替換相應的行：

var search = Observable.fromEvent($input, 'keyup'). 
    throttle(20). 
    map(function (key) { return $input.value; }). 
    distinctUntilChanged();

jsbin：http://jsbin.com/cosetocowe/edit?html,js,output

最新的留言，在searchColors功能，您將追加新的元素，所以你鍵入，你會在最後添加精緻的選擇。這是你尋求的行爲嗎？

來源

2015-11-26 12:36:35 user3743222

謝謝！我沒有意識到按鍵不會記錄價值，並且我沒有返回搜索。我更新了代碼，以便反映您的更改。 – jmarthernandez

你可以使用RxJs-DOM

包括腳本和改變你的搜索定義，就這樣。

var search = Rx.DOM.keyup($input) 
 
     .pluck('target','value') 
 
     .filter(function (text) { 
 
     return text.length > 0; 
 
    }).debounce(50) 
 
    .distinctUntilChanged();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/7.0.3/rx.dom.js"></script>

來源

2015-11-26 09:59:26

Rxjs - 沒有獲取可觀察到的dom元素的值

回答

相關問題