MD Bookmarks: Proof-of-concept reimplementation of data storage/binding layer

chrome/browser/resources/md_bookmarks/router.js

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Polymer({
   /**
    * This element is a one way bound interface that routes the page URL to
    * the searchTerm and selectedId. Clients must initialize themselves by
    * reading the router's fields after attach.
    */
   is: 'bookmarks-router',
 
+  behaviors: [
+    bookmarks.StoreClient,
+  ],
+
   properties: {
     // Parameter q is routed to the searchTerm.
     // Parameter id is routed to the selectedId.
     queryParams_: Object,
 
     searchTerm: {
       type: String,
-      observer: 'onSearchTermChanged_',
     },
 
     /** @type {?string} */
     selectedId: {
       type: String,
-      observer: 'onSelectedIdChanged_',
     },
   },
 
   observers: [
-    'onQueryChanged_(queryParams_.*)',
+    'onQueryChanged_(queryParams_.q)',
+    'onFolderChanged_(queryParams_.id)',
+    'onStateChanged_(searchTerm, selectedId)',
   ],
 
+  attached: function() {
+    this.observe('selectedId', function(state) {
+      return state.selectedFolder;
+    });
+    this.observe('searchTerm', function(state) {
+      return state.search.term;
+    });
+  },
+
   /** @private */
   onQueryChanged_: function() {
-    this.searchTerm = this.queryParams_.q || '';
-    this.selectedId = this.queryParams_.id;
-
-    if (this.searchTerm)
-      this.fire('search-term-changed', this.searchTerm);
-    else
-      this.fire('selected-folder-changed', this.selectedId);
+    var searchTerm = this.queryParams_.q || '';
+    if (searchTerm && searchTerm != this.searchTerm) {
+      this.searchTerm = searchTerm;
+      this.dispatch(bookmarks.actions.setSearchTerm(searchTerm));
+    }
   },
 
   /** @private */
-  onSelectedIdChanged_: function() {
-    this.set('queryParams_.id', this.selectedId || null);
+  onFolderChanged_: function() {
+    var selectedId = this.queryParams_.id;
+    if (selectedId && selectedId != this.selectedId) {
+      this.selectedId = selectedId;
+      this.dispatch(bookmarks.actions.selectFolder(selectedId));
+    }
   },
 
   /** @private */
-  onSearchTermChanged_: function() {
-    this.set('queryParams_.q', this.searchTerm || null);
+  onStateChanged_: function() {
+    this.debounce('updateQueryParams', this.updateQueryParams_.bind(this));
+  },
+
+  /** @private */
+  updateQueryParams_: function() {
+    if (this.searchTerm)
+      this.queryParams_ = {q: this.searchTerm};
+    else
+      this.queryParams_ = {id: this.selectedId};
   },
 });