バインディング/ Unbiding backbonejsイベントRxJS

Question

に私は私の基幹プロジェクトでRxJSをしようとしています。現在、私はバックボーンスタイルのイベントを表示しています。

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

バックボーンはこれらのイベントを適切にバインド/バインド解除します。どのように私はまた、ビューが消えるとアンバインドを取得、これらのイベントをバインドする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イベントを登録するためのコードです：ビューが構築され、undelegateEventsは、ビューのremoveによって内部的に呼び出されながら

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が呼び出されます。あなたはすべてのあなたの意見から延びている特定のビュー、またはベースビューのためのあなたのRxJS機能を追加および削除するdelegateEventsとundelegateEventsメソッドをオーバーライドすることができます。