Backbone.js 将backbonejs事件绑定/取消绑定到RxJS

我正在用我的主干项目尝试RxJS。目前，我在视图中有主干样式的事件，例如

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

主干网适当地处理绑定/解除绑定这些事件。我如何使用

Rx.Observable.fromEvent

/

Rx.Observable.fromEventPattern

绑定这些事件，这些事件在视图消失时也会解除绑定

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

---

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

下面是基于视图的事件哈希注册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

，视图的

remove

在内部调用

undelegateEvents

。您可以覆盖

delegateEvents

和

undelegateEvents

方法，为特定视图或所有视图扩展的基础视图添加和删除RxJS功能。

下面是基于视图的事件哈希注册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

，视图的

remove

在内部调用

undelegateEvents

。您可以覆盖

delegateEvents

和

undelegateEvents

方法，为特定视图或所有视图扩展的基础视图添加和删除RxJS功能。

该页面显示“从本机上讲，RxJS支持许多库，并与它们挂钩，例如jQuery，…和Backbone.js，以使用它们的事件系统”. 它说的是“他们的事件系统”，我相信这是指内置于事件机制中的主干，而不是处理DOM事件的事件哈希。特别是基于此，他们说“我们发现很多库都有.on和.off方法，我们可以很容易地将它们包装起来。”。他们不太可能处理主干事件哈希。也许在他们的GitHub中提出一个问题并澄清这一点是个好主意。顺便说一句，你想通过这个达到什么目的？我也读到了同样的内容。我有一些过滤器相关的复选框和搜索框。我想从这些文件中获取输入，并向后端调用firesearch，获取数据并进行渲染。当视图消失时，这些复选框和键盘输入也应取消绑定。请在问题中编辑其他详细信息。另外，如果可能的话，请提供一个@hridayesh我看不出有任何理由不能对正常事件执行此操作。问题是为什么需要RxJS？该页面说“RxJS在本机上支持许多库，并与它们挂钩，例如jQuery，…和Backbone.js，以使用它们的事件系统”。它说的是“他们的事件系统”，我相信这是指内置于事件机制中的主干，而不是处理DOM事件的事件哈希。特别是基于此，他们说“我们发现很多库都有.on和.off方法，我们可以很容易地将它们包装起来。”。他们不太可能处理主干事件哈希。也许在他们的GitHub中提出一个问题并澄清这一点是个好主意。顺便说一句，你想通过这个达到什么目的？我也读到了同样的内容。我有一些过滤器相关的复选框和搜索框。我想从这些文件中获取输入，并向后端调用firesearch，获取数据并进行渲染。当视图消失时，这些复选框和键盘输入也应取消绑定。请在问题中编辑其他详细信息。另外，如果可能的话，请提供一个@hridayesh我看不出有任何理由不能对正常事件执行此操作。问题是为什么您需要RxJS来实现这一点？