將backbonejs事件綁定到RxJS中

我正在嘗試RxJS與我的骨幹項目。目前我有骨幹風格的事件，如將backbonejs事件綁定到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 
});

我想結合兩者並使用其中最好的。

來源

2017-02-16 hridayesh

該頁面顯示*「本機上，RxJS支持一些庫和鉤子，例如jQuery，...和Backbone.js以使用它們的事件系統」*。它說**「他們的事件系統」**，我相信這意味着在事件機制中構建主幹，而不是處理DOM事件的事件散列。尤其是基於這個[Github問題]（https://github.com/Reactive-Extensions/RxJS/issues/679） –

他們說*「我們發現的是，很多圖書館都有.on和.off方法，可以很容易地圍繞這一點。「*。他們不太可能處理骨幹事件哈希。也許提出一個問題並在他們的GitHub中澄清這個問題是一個好主意。順便說一句，你想通過這個來達到什麼目的？ –

我也讀過一樣的。我有一些過濾器相關的複選框和搜索框。我想從這些中獲取輸入，並將搜索調用發送到後端，獲取數據並進行渲染。當視圖消失時，這些複選框和鍵盤輸入也應該解除綁定。 – hridayesh

下面是用於註冊基於視圖的事件哈希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被調用。您可以覆蓋delegateEvents和undelegateEvents方法來爲特定視圖添加和刪除RxJS功能，或者爲您的所有視圖擴展而來的基本視圖。

來源

2017-02-17 14:41:24

將backbonejs事件綁定到RxJS中

回答

相關問題