Обе функции рендеринга имеют одинаковый код, но может работать только один, почему? - PullRequest
Новая
       4

Обе функции рендеринга имеют одинаковый код, но может работать только один, почему?

0 голосов
/ 23 января 2020

Я хочу использовать две render функции для рендеринга двух классов. 

class SidebarView {
  constructor(model, root) {
    this.root = root;
    this.model = model;
    model.addObserver(x => this.update(x));
  }

  render() {
    this.root.innerHTML = `<span>${this.model.getNumberOfGuests()}</span>`;
  }

  update(whatHappened) {
    this.root.secondElementChild.textContent = whatHappened.guests;
  }
}

class SummaryView {
  constructor(model, root) {
    this.root = root;
    this.model = model;
    model.addObserver(x => this.update(x));
  }

  render() {
    this.root.innerHTML = `Dinner for <span>${this.model.getNumberOfGuests()}</span> people`;
  }

  update(whatHappened) {
    this.root.firstElementChild.textContent = whatHappened.guests;
  }
}

class DinnerModel {
  constructor() {
    this.numberOfGuests = 2;
    this.subscribers = [];
  }
  setNumberOfGuests(x) {
    this.numberOfGuests = x;
    this.notifyObservers({
      guests: x
    });
    return x
    // TODO TW1.1
  }
  getNumberOfGuests() {
    return this.numberOfGuests // TODO TW1.1
  }

  addObserver(callback) {
    this.subscribers.push(callback);
    console.log(this.subscribers)
  }
  notifyObservers(whatHappened) {
    for (let i = 0; i < this.subscribers.length; i++) {
      return this.subscribers[i](whatHappened)
    }
  }
}

const model = new DinnerModel();
new SummaryView(model, document.body.querySelector("#summary")).render();
new SidebarView(model, document.body.querySelector("#sidebar")).render();

function onModelChange(payload) {
  document.body.textContent = payload.guests;
}

model.addObserver(onModelChange);

Эти коды почти одинаковы, но хорошо работает только Summary, я не знаю почему.

Я вижу номер 2 в браузере, но для боковой панели я не могу изменить номер через консоль. Только резюме может изменить число через консоль.

Заранее спасибо. Поскольку я начинающий с Javascript, это может быть глупый вопрос.

1 Ответ

0 голосов
/ 23 января 2020

Проблема в том, что notifyObservers() возвращается после уведомления первого абонента. Вы не должны иметь return в l oop, поскольку это немедленно завершает функцию и никогда не продолжается с другими абонентами.

Просто позвоните абонентам, не возвращая. 

  notifyObservers(whatHappened) {
    for (let i = 0; i < this.subscribers.length; i++) {
      this.subscribers[i](whatHappened)
    }
  }
...