Блог

Я использую реактивное расширение DOM для прослушивания события из DOM. В настоящее время я сталкиваюсь с одной проблемой: у меня есть вход A и div B и div C. Изменение ввода A повлияет на B, а изменение содержимого B изменит содержимое div C. Итак, это означает: если я изменю ввод A, div B и div C автоматически изменятся.

В настоящее время я сталкиваюсь с проблемой: при изменении ввода A ввод B успешно изменен, но не C. Я не знаю, потому что RxDom не поддерживает изменение recursive или потому, что у 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.

Rx подпишется на change событие ввода. change событие срабатывает только при фактическом вводе пользователем, но ваше значение изменяется программно.

Ваша проблема в том, что вы вводите в A самостоятельно, change из A запускается -> подписка на 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" );