将主干 js 事件绑定/解除绑定到 RxJS答案

【问题标题】：Binding/Unbiding backbonejs events into RxJS将主干 js 事件绑定/解除绑定到 RxJS
【发布时间】：2017-02-16 10:30:39
【问题描述】：

我正在用我的骨干项目尝试 RxJS。目前我有骨干风格的事件，例如

events:{
    "click .cross_10_10":"clearSearch",
    "keypress .searchUsers": "searchUsers"
}

Backbone 适当地处理绑定/解除绑定这些事件。如何使用Rx.Observable.fromEvent/Rx.Observable.fromEventPattern 绑定这些事件，这些事件在视图消失时也会解除绑定。

GitHub docs 说 RxJS 支持挂钩到主干，但不知道如何。

当前代码

MyView = Backbone.View.extend({
    constructor: function(container) {
      var html = $.trim($("script#tmpl_myview").html());
      this.el = $(_.template(html)({type:"random"}));
    },
    events:{
      "keypress .searchUsers": "searchUsers"
    },
    searchUsers: function() {
       var searchTerm = this.$(".searchUsers").val().trim();
       $.get("/searchUsers?q="+searchTerm)
       .then(_.bind(this.drawUsers, this));
    },
    drawUsers: function(users) {
       //render users in dom
    }
})

我想使用 RxJS 来限制搜索查询。如果它只是 jquery，而不是骨干网，我会这样做。

var keyStream = Rx.Observable.fromEvent($(".searchUsers"), 'keypress').debounce(300)
.map(function(e){
    return $(".searchUsers").val();
}).distinctUntilChanged();
var respStream = keyStream.switchMap(function(searchTerm){
    return $.get("/searchUsers?q="+searchTerm);
});
respStream.subscribe(function(users){
//render
});

我想将两者结合起来并充分利用它们。

【问题讨论】：

该页面显示 “RxJS 原生支持许多库和挂钩，例如 jQuery, ... 和 Backbone.js 以使用它们的事件系统”。它说“他们的事件系统”，我认为这意味着构建在事件机制中的主干，而不是处理 DOM 事件的事件哈希。尤其是基于这个Github issue
他们说 “我们发现很多库都有 .on 和 .off 方法，我们可以轻松地绕过它们。”。他们不太可能处理主干事件哈希。也许在他们的 GitHub 中提出问题并澄清这一点是个好主意。顺便说一句，你想通过这个来达到什么目的？
我也读过。我有一些过滤器相关的复选框和搜索框。我想从这些中获取输入，并向后端发起搜索调用，获取数据并呈现它。当视图消失时，那些复选框和键盘输入也应该解除绑定。
在您的问题中编辑其他详细信息。此外，如果可能，请提供minimal reproducible example。
@hridayesh 我看不出有什么理由不能在正常事件中做到这一点。问题是为什么你需要 RxJS？

标签： backbone.js rxjs

【解决方案1】：

下面是根据视图的事件哈希注册DOM事件的代码：

 delegateEvents: function(events) {
  events || (events = _.result(this, 'events'));
  if (!events) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[method];
    if (!method) continue;
    var match = key.match(delegateEventSplitter);
    this.delegate(match[1], match[2], _.bind(method, this));
  }
  return this;
},
delegate: function(eventName, selector, listener) {
  this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener);
  return this;
},
undelegateEvents: function() {
  if (this.$el) this.$el.off('.delegateEvents' + this.cid);
  return this;
},

delegateEvents 在构造视图时被调用，undelegateEvents 被视图的remove 在内部调用。您可以覆盖 delegateEvents 和 undelegateEvents 方法来为特定视图或所有视图扩展的基本视图添加和删除 RxJS 功能。

【讨论】：