Как правильно добавить значение View в модуле через контроллер?

Question

На самом деле весь вопрос в заголовке, у меня есть кнопка, написанная на HTML, скажем, это мой вид, который возвращает число:

export class View {

    addItem() {
        let plus = document.querySelector('.plus');
        plus.addEventListener('click', () => {
            let num = document.querySelector('.count').innerHTML;
            return num;
        })
    }
}

Вот мой модуль с функцией addNum, который на самом деле должен добавить число в массив:

export class Module {
    constructor() {
        this.num = [];
    }


    addNum(num){
        this.num.push(num);
    }

}

Вот контроллер:

class Controller {
    constructor(view, module){
        this.view = view;
this.module = module;
    }

    getNum(){
        this.cart.addNum(this.view.addItem());

    }
}

Проблема в том, что когда я вызываю функцию контроллера getNum, она работает мгновенно, как я могу ждать события? Надеюсь все понятно, спасибо заранее!

Answer 1

Это можно сделать естественным образом с помощью наблюдаемых RxJS. Они хорошо подходят для таких целей, то есть для создания реактивных интерфейсов и широко используются в Angular.

Наблюдаемое - это, в основном, поток значений, которые можно преобразовать и, в конце концов, подписать. Он имеет много общего с обещаниями, которые были предложены в другом ответе, но наблюдаемые результаты приводят к последовательности значений, в то время как обещание приводит к одному значению.

RxJS содержит расширенные функциональные возможности, включая поддержку событий DOM. RxJS fromEvent (см. краткое руководство ) заменяет addEventListener и создает поток событий щелчка, который может быть сопоставлен с другим значением (входное значение формы):

addItem() {
  let plus = document.querySelector('.plus');

  return Observable.fromEvent(plus, 'click')
  .map((event) => {
    return document.querySelector('.count').innerHTML;
  });
}

Наблюдение подписывается в месте, где должны быть получены значения:

getNum(){
  this.numSubscription = this.view.addItem().subscribe(num => {
    this.module.addNum(num);
  });
}

Поток значений можно остановить, отписавшись от наблюдаемой, this.numSubscription.unsubscribe(). Это внутренне вызовет removeEventListener.

Вот демо .