如何通过控制器在模块中正确添加视图值？答案

【问题标题】：How to correctly add View value in Module via Controller?如何通过控制器在模块中正确添加视图值？
【发布时间】：2018-10-15 00:32:23
【问题描述】：

其实标题中的整个问题，我有一个用HTML写的按钮，假设这是我的View，它返回一个数字：

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控制器函数时，它立即生效，我如何等待一个事件？

【问题讨论】：

标签： javascript oop model-view-controller ecmascript-6

【解决方案1】：

这可以用 RxJS 的 observables 自然地处理。它们非常适合此类用途，即构建反应式 UI 并在 Angular 中广泛使用。

observable 基本上是一个可以转换并最终订阅的值流。它与另一个答案中建议的 promise 有很多共同点，但是 observable 会产生一系列值，而 promise 会产生一个值。

RxJS 包含广泛的功能，包括对 DOM 事件的支持。 RxJS fromEvent（参见a short tutorial）替换了addEventListener，并创建了一个可以映射到另一个值（表单输入值）的点击事件流：

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

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

在应该接收值的地方订阅了一个 observable：

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

可以通过取消订阅可观察对象this.numSubscription.unsubscribe() 来停止值流。这将在内部触发removeEventListener。

这里是a demo。

【讨论】：