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

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，但这并不是我真正想要的方式，它看起来像是一个解决方法版本。因为业务原因，div C 依赖于 div B 而不是输入 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" );