RxJSはイベントを受信しますが、後でイベントリスナーを接続します

Question

RxJSを使用して、イベントを購読します。問題は：イベントリスナーが設定される前にObservableをセットアップしたい。

これは2つのボタンのように考える：Button1はクリックされたときに何かをするが、button2がbutton1にイベントリスナーをアタッチした後にのみ何かをする。オブザーバーは、button1のclickイベントにサブスクライブする必要があります。このすべては、アプリの起動時に一緒に配線する必要があります。 Button2はオブザーバを設定すべきではありません！ RxJSのないいくつかのコード：

button2.addEventListener('click', function() { 
    // [...] some code to prevent that button1 has more than one event listener 

    // attach event listener to button1 
    button1.addEventListener('click', clickHandler); 

    // now let observer subscribe itself to clickHandler somehow 
    // -> HOW? 
}); 


function clickHandler() { 
    console.log("clicked"); 
} 

編集：たぶん、何かを発することはありませんダミーのイベントハンドラのいくつかの種類を観察することが可能ですが、ボタン2がクリックされた後、実際のイベントハンドラ（clickHandler）に変わるか、そのような何か？！

Edit2：2つのボタンが最良の例ではないことに気付きました。それを違うものにして、button2のイベントリスナーを未知のメカニズムでアタッチさせましょう。たとえば、次のように

// is called by unkown means, i. e. the observer doesn't know how and when its attached 
function attach() { 
    button1.addEventListener('click', clickHandler); 
} 

しかしattach()が呼び出されたときに、観察者はclickHandlerに加入する必要があります。あるいはObserverがいつも何らかの関数に登録されていて、attach()が実際のイベントリスナで関数を取り替えるかもしれません。ダニー。

Answer 1

にアイテムを出すObservableを作成したいと思うので、それぞれbutton1をクリックしますが、ちょっと前にbutton2をクリックした後にのみ表示されます。

次に、この作業をする必要があります：

var button1 = document.querySelector('#button1'); 
 
var button2 = document.querySelector('#button2'); 
 

 
var onButton2Click$ = Rx.Observable.fromEvent(button2, 'click').take(1); 
 
var onButton1Click$ = Rx.Observable.fromEvent(button1, 'click').skipUntil(onButton2Click$); 
 

 

 
onButton1Click$.subscribe(function(event) { 
 
    console.log('button 1 clicked') 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.min.js"></script> 
 

 
<button id="button1">button 1</button> 
 
<button id="button2">button 2</button>

fromEventメソッドが何をするか明確にする必要があります。

パラメータ1のtakeオペレータは、onButton2Click$の観測対象が1つのアイテムのみを放出して完了することを保証します。

skipUntilオペレータは、onButton1Click$が観測可能であることが、少なくとも1アイテムが放射されることが確認できるまでonButton2Click$になるまでアイテムの放射を開始することを保証します。編集した質問については

：答えるために時間を割いて

var button1 = document.querySelector('#button1'); 
 
var button2 = document.querySelector('#button2'); 
 

 
var onAttach$$ = new Rx.Subject(); 
 

 
function attach() { 
 
    onAttach$$.next(); 
 
    onAttach$$.complete(); 
 
} 
 

 
var onButton1Click$ = Rx.Observable.fromEvent(button1, 'click').skipUntil(onAttach$$); 
 

 
// for testing only 
 
button2.addEventListener('click', function(e) { 
 
    attach(); 
 
}); 
 

 
onButton1Click$.subscribe(function(event) { 
 
    console.log('button 1 clicked') 
 
}); 
 

 
onAttach$$.subscribe(function() { 
 
    console.log('attached listener') 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.min.js"></script> 
 

 
<button id="button1">button 1</button> 
 
<button id="button2">attach</button>