RxDom：当输入改变时递归更新 div 的内容

Question

我正在使用 Reactive Extension DOM 来收听来自 DOM 的事件。目前我遇到一个问题：我有一个输入 A 和 div B 和 div C。改变输入 A 会影响 B，改变 B 的内容会改变 div C 的内容。所以，这意味着：如果我更改输入 A，div B 和 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，但这并不是我真正想要的方式，它看起来像是一个变通版本。因为业务原因，divC依赖divB而不是输入A。

Answer 1

Rx 会订阅输入的 change 事件。 change 事件仅在实际用户输入时触发，但您的值会以编程方式更改。

您的问题是：您自己输入 A，触发 A 的 change -> A 的订阅将是运行 -> B 以编程方式更改 -> change不会在 B 上触发 -> B 上的订阅不会运行 :)

因此解决方案是：当您更改 B 的值时，您再次手动触发 change 事件。您还应该注意，您必须在纯 javascript 上执行此操作，而不是在 jquery 上执行此操作。这是一个示例代码：

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

以下代码将不起作用。因为 RxJS 只订阅 javascript 个原生事件，而不是 jquery 个事件。请小心，因为这将花费您很长时间进行调试。

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

RxDom：当输入改变时递归更新 div 的内容

RxDom: Update content of div recursive when an input is changed

javascript

rxjs

rxjs-dom