06: use MVVM pattern

Soshi Katsuta · Soshi Katsuta · commit 453b808ea882 · 2016-12-14T21:42:21.000+09:00
Signed-off-by: Soshi Katsuta &lt;skatsuta@amazon.com&gt;
diff --git a/06 - Type Ahead/index.js b/06 - Type Ahead/index.js
@@ -1,30 +1,77 @@
-class Suggester {
+class Notifier {
   constructor() {
-    this.cities = [];
-    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+    this.handlers = [];
+  }
+
+  observe(handler) {
+    this.handlers.push(handler);
+  }
+
+  fire() {
+    this.handlers.forEach(handler => handler());
+  }
+}
+
+class Model {
+  constructor() {
+    this._cities = [];
+    this._matchedCities = [];
+    this.matchedCitiesChanged = new Notifier;
+  }
+
+  get matchedCities() {
+    return this._matchedCities;
+  }
+
+  set matchedCities(cities) {
+    this._matchedCities = cities;
+    this.matchedCitiesChanged.fire();
+  }
+
+  loadCities() {
+    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29' +
+      '/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
     fetch(endpoint)
       .then(resp => resp.json())
-      .then(data => this.cities.push(...data));
+      .then(data => this._cities.push(...data));
+  }
+
+  match(wordRegex) {
+    this.matchedCities = this._cities.filter(place =>
+      wordRegex.test(place.city) || wordRegex.test(place.state)
+    );
+  }
+}
+
+class ViewModel {
+  constructor() {
+    this.model = new Model();
+    this.matchedCities = this.model.matchedCities;
+
+    // register handler to observer
+    this.model.matchedCitiesChanged.observe(() => this.matchedCities = this.model.matchedCities);
+
+    // add event handlers
+    this.searchInput = document.querySelector('input.search');
+    this.suggestions = document.querySelector('ul.suggestions');
+    ['change', 'keyup'].forEach(event =>
+      this.searchInput.addEventListener(event, () => this.render(this.searchInput.value))
+    );
+
+    this.model.loadCities();
   }
 
-  listMatches(wordToMatch) {
+  render(wordToMatch) {
     const regex = new RegExp(wordToMatch, 'gi');
-    const html = this.cities
-      .filter(place => regex.test(place.city) || regex.test(place.state))
-      .map(place => {
-        const highlight = `<span class="hl">${wordToMatch}</span>`;
-        const cityName = place.city.replace(regex, highlight);
-        const stateName = place.state.replace(regex, highlight);
-        return `<li><span class="name">${cityName}, ${stateName}</span></li>`;
-      })
-      .join("\n");
-    return html;
+    this.model.match(regex);
+
+    this.suggestions.innerHTML = this.matchedCities.map(place => {
+      const highlight = `<span class="hl">${wordToMatch}</span>`;
+      const cityName = place.city.replace(regex, highlight);
+      const stateName = place.state.replace(regex, highlight);
+      return `<li><span class="name">${cityName}, ${stateName}</span></li>`;
+    }).join("\n");
   }
 }
 
-const searchInput = document.querySelector('input.search');
-const suggestions = document.querySelector('ul.suggestions');
-const suggester = new Suggester();
-const displayMatches = () => suggestions.innerHTML = suggester.listMatches(searchInput.value);
-searchInput.addEventListener('change', displayMatches);
-searchInput.addEventListener('keyup', displayMatches);
+new ViewModel();
