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

【问题标题】：RxDom: Update content of div recursive when an input is changedRxDom：当输入改变时更新 div 递归的内容
【发布时间】：2017-02-22 06:22:04
【问题描述】：

我正在使用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。

【问题讨论】：

标签： javascript rxjs rxjs-dom

【解决方案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" );

【讨论】：