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

Question

我使用响应式扩展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" );