Question

所以我按如下方式设置了我的观察点：

var other1 = $("#other");
var textInput = $("#search");
      this.suggestions =
            Rx.Observable.fromEvent(textInput, 'keyup')
              .pluck('target','value')
              .filter( (text) => {
                  text = text.trim();
                  if (!text.length) // empty input field
                  {
                      this.setState({ list: [] });
                  }
                  return text.length > 2;
              })
              .debounceTime(300)
              .distinctUntilChanged()
              .switchMap(term => this.search_company(term))
              .subscribe(
                (response) =>
                {
                  /* Subscription code */
                }
              );

我有三个其他input type="text"使用类似的逻辑，但订阅输出略有不同。所以我想知道是否有办法通过连接大多数逻辑来简化它，并且只是在获得相关调用者时改变订阅分辨率，例如输入来自other1时获得other1。

Answer 1

在此处提供代码。

澄清它给出了$event对象，因此我们可以得到我们想要的所有信息。

文件：RxJS documentation for forEvent

JSBin：http://jsbin.com/morolevehu/edit?html,js,console,output

Rx.Observable.fromEvent($("input"), 'keyup')
    .pluck('target')
    .map(target=>({id:target.id, value: target.value }))
    .subscribe(console.log);

给出输出：

{
    id: 'other',
    value: 'hello' // whatever you typed in the input
}

为了保持干净，请使用类（例如'searchable'）并使用该类而不是所有类查询输入。

Rx.Observable.fromEvent($("input.searchable"),'keyup')

更新：如何将ID保留到最后

在解决方案中包含原始代码。

let inputSearch$ = 
  Rx.Observable
    .fromEvent($("input"), 'keyup')
    .pluck('target')
    .flatMap(target=>
             Observable.of(target.value)
             .filter( (input) => {
                  text = text.trim();
                  if (!text.length) // empty input field
                  {
                      this.setState({ list: [] });
                  }
                  return text.length > 2;
              })
              .debounceTime(300)
              .distinctUntilChanged()
              .switchMap(term => this.search_company(term))
              .map(response => {
                  id: target.id,
                  result: response
               })               
    );

让rxjs处理这个问题，而不是为不同的输入做些不同的操作。在subscribe中仅执行最终结果。为此，我们可以使用inputSearch$流。

inputSearch$
    .filter(output => output.id==='other1')
    .pluck('result')
    .subscribe(result => {
     //what you want to do with other1  
    });

inputSearch$
    .filter(output => output.id==='other2')
    .pluck('result')
    .subscribe(result => {
     //what you want to do with other2  
    });

rxjs - 具有单个Observable的多个fromEvent

1 个答案: