javascript - Rxjs - 不获取 observable 中 dom 元素的值

Question

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

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

这会引发未捕获的类型错误:无法读取未定义的属性“toLowerCase”

我认为我的 $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

可以通过使用do运算符或console.log日志指令跟踪运算符链的执行来跟踪这一点。通过这样做我发现:

• 您调用了 searchColors 两次。第二次传递的值将始终是未定义的，因为您尚未在 map(function (search) { searchColors(search); }); 中返回值，因此当您订阅该流时，您获取未定义。也许您在事后添加该代码是出于调试目的？

• 纠正该问题后，您将看到 $input.value 仍然是未定义。这里的问题是你对按键使用react。您应该对 keyup 使用react。在按键时，输入框尚未使用您的按键进行更新。

简而言之，将相应的行替换为:

  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 函数中，您附加新元素，因此在您键入时，您将在末尾添加精炼的选择。这是您寻求的行为吗？