2017-02-16 20 views
0

Я пытаюсь использовать RxJS с моим базовым проектом. В настоящее время я магистральное стилизованное событие с точкой зрения, такими какСвязывание/Неподвижные события backbonejs в 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 
}); 

Я хочу комбинировать и использовать лучшие из них.

+1

Эта страница говорит * «На самом деле, RxJS поддерживает несколько библиотек и крючков в них, таких как jQuery, ... и Backbone.js для использования их системы событий» *. В нем говорится, что «их система событий» **, которая, я считаю, означает магистрали, построенные в механизме событий, а не хеш события, который имеет дело с событиями DOM. Особенно на основе этого [Github issue] (https://github.com/Reactive-Extensions/RxJS/issues/679) –

+0

Они сказали * «мы обнаружили, что у многих библиотек есть методы .on и .off, где мы может легко обернуться вокруг этого ». *. Очень маловероятно, что они имеют дело с хешем хэнд-хау. Возможно, будет хорошей идеей поднять вопрос и прояснить это в их GitHub. Кстати, чего вы пытаетесь достичь этим? –

+0

Я тоже читаю то же самое. У меня есть флажки, связанные с фильтрами, и поле поиска. Я хочу получить от них данные, а также вызвать запрос поиска огня на бэкэнд, получить данные и отобразить их. когда вид исчезает, эти флажки и ввод на клавиатуре также должны быть не привязаны. – hridayesh

ответ

2

Ниже приведен код для регистрации событий 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 для определенного вида или базового представления, из которого все ваши виды расширяются.