RxDom：入力が変更されたときにdivの再帰的なコンテンツを更新します。

Question

DOMからのリスニングイベントにReactive Extension DOMを使用しています。現在、私は1つの問題を抱えています。私は入力Aとdiv Bとdiv Cを持っています。入力Aを変更するとBに影響し、Bの内容を変更するとdiv Cの内容が変わります。 div Cが自動的に変更されます。

現在のところ、入力Aが変更された場合、入力Bは正常に変更されましたが、Cではなく変更されました。RxDomは再帰的な変更をサポートしていないか、divに変更イベントがないので、ここに私の短いコードです：

var input = document.getElementById('test_id'); 
    var source = Rx.DOM.change(input); 
    var subscription = source.subscribe(
      function (x) { 
       console.log(x); 
      }, 
      function (err) { 
       console.log('Error: ' + err); 
      }, 
      function() { 
       console.log('Completed'); 
      }); 

はもちろん、私は、入力Aのイベントに耳を傾け、その後、Cを変更することができますが、それは本当に私が欲しいの方法ではありません、それは回避策バージョンのように見えます。ビジネスのために、div Cはdiv Aに依存するのではなくdiv Bに依存するからです。

Answer 1

Rxは入力のchangeイベントを購読します。 changeイベントは実際のユーザー入力でのみトリガされますが、値はプログラムによって変更されます。

あなたの問題がある：あなたは自分でに入力、Aのchangeが引き金である - > Aのサブスクリプションが実行されます - > Bがプログラムで変更された - >changeがBでトリガされていません - > Bのサブスクリプションはしません実行：

したがって、これのソリューションは：Bの値を変更すると、changeイベントを手動でトリガーします。また、jqueryではなく純粋なjavascriptでこれを行う必要があることに注意してください。次にコード例を示します。

var event = new Event('change'); 
div_b_element.dispatchEvent(event); 

以下のコードは動作しません。 RxJSはjqueryイベントではなく、javascriptのネイティブイベントのみを購読するためです。これは、デバッグに時間がかかるため、注意してください。

$(div_b_element).trigger("change");