Question

我正在尝试使用我的骨干项目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
});

我想结合两者并使用其中最好的。

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功能，或者扩展所有视图的基本视图。

将backbonejs事件绑定/取消绑定到RxJS

1 个答案: