Binding/Unbiding backbonejs 事件到 RxJS

Question

我正在 backbone 项目中尝试 RxJS。目前我有 backbone 样式的事件，例如

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

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

GitHub docs 说 RxJS 支持挂钩到 backbone 但无法找到如何。

当前代码

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，而不是 backbone，我会这样做。

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
});

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

Answer 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 功能，或者所有视图都从中扩展的基础视图。

Binding/Unbiding backbonejs 事件到 RxJS

Binding/Unbiding backbonejs events into RxJS

backbone.js

rxjs