Question

我正在尝试创建一个从输入框中搜索颜色数组的小部件。

在我的js文件中的Observable中，我引用了输入dom元素，我从中获取了按键。每当我试图获取$ input的值时，我都会得到未定义的。但是，当我进入控制台时，我可以选择元素并获取值。这应该是更新值，以便我将限制的按键发送到我的搜索功能。目前，我将undefined发送回我的searchColors函数。

这会抛出Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

我认为我的$ input是此代码中的主要错误。谢谢你的帮助！

的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

Answer 1

您可以使用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>

Answer 2

通过使用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函数中，您追加新元素，因此在您键入时，您将在最后添加精炼的选择。这是你寻求的行为吗？

Rxjs - 没有抓住可观察

2 个答案: