javascript - polymer 核心菜单双重事件

Question

我正在使用 Polymer对于我的网络应用程序，我目前在页面链接方面遇到一些问题。这是我使用所有 ajax/javascript 制作的第一个站点，因此我还没有大量使用 javascript 的历史记录功能。

无论如何，我在左侧边栏中有一个主菜单。当按下其中一个时，它应该更改浏览器的 url 并将其放入浏览器的历史记录中。为此，我有以下代码:

Polymer('my-app', {
    mainMenu: function(){
        this.$.mainPages.selected = this.$.mainMenu.selected;
        console.log("Pusing state " + this.$.mainMenu.selected);
        history.pushState(null , "title", this.$.mainMenu.selected);
    }
});

现在的问题是它被调用了两次，所以如果你点击一次 pushState 就会被调用两次。不用说这不好。

我在这里做了一个示例代码:click me .

在此示例代码中，您可以看到在按下几个菜单项后，首先事件被触发了两次。我还注意到，当按下后退按钮时，更新页面似乎也会重新触发 pushState。

简而言之，我的首要关注 是从 core-menu 中按下一个元素的事件, mainMenu 函数被调用了两次。 第二个问题是我在返回时重新推送状态，我认为这也应该被阻止。

更新后的代码:

Polymer('my-app', {
    ready: function(){
        var link = document.URL.split("/");
        this.$.mainMenu.selected = link[link.length-1];
        console.log("ready with link: "+link[link.length-1]);
        window.onpopstate = function(){
            var link = document.URL.split("/");
            console.log("Calling onpopstate. New link is: "+link[link.length-1]);
            this.$.mainMenu.selected = link[link.length-1];
            this.$.mainPages.selected = this.$.mainMenu.selected;
        }
    },
    nav: function(){
        this.$.drawerPanel.togglePanel();
    },
    back: function(){
        window.history.back();
    },
    mainMenu: function(){
        console.log("Pusing state " + this.$.mainMenu.selected);
        this.$.mainPages.selected = this.$.mainMenu.selected;
        history.pushState(null , "title", this.$.mainMenu.selected);
    }
}

Answer 1

你最好使用数据绑定(bind)。这里的想法是让您的元素模型驱动，模型- View -展示者 (MVP) 模式。模型由元素中的属性组成， View 由模板描述，演示者在脚本中。数据绑定(bind)允许我们将 View 与逻辑松耦合。

让我们决定当前页面将由名为 page 的属性控制。

然后我们可以将我们的 UI 设置为由 page 属性驱动:

  <core-menu selected="{{page}}" valueattr="id">
     ...
  </core-menu>
  <core-animated-pages class="main" selected="{{page}}" valueattr="id" transitions="slide-from-right"> 

这很好，因为我们已将 UI 与代码分离。代码从不直接与 core-animated-pages 或 core-menu 对话(注意我删除了 id)。我们不听任何事件。这样我们就可以随意更改UI，而无需修改脚本。

现在，我们希望 page 最初由 URL 选择，因此我们将以这种方式初始化它，或者默认为“home”。我们还想同步 page 以返回事件，因此我们将监听 `onpopstate'。

   ready: function() {
      // scrape the initial page off the window location
      this.page = location.hash.slice(1) || 'home';
      // listen for 'back' events
      addEventListener('popstate', this.popstate.bind(this));
   },
   popstate: function(event) {
     // comes here whether we went 'back' from code or UI
     this.poppedPage = this.page = event.state;
   }

我们跟踪 poppedPage 以便我们可以区分前后。我们只想在前进时插入一个新的状态。

现在我们需要页面反射(reflect)在历史中，所以我们需要在页面变化时推送状态。如上所述，一个警告是，如果我们继续前进，我们只需要插入状态。

    pageChanged: function() {
      // if the selected page changes, push a state (unless we are going backward)
      if (this.poppedPage !== this.page) {
        history.pushState(this.page, "Title", '#' + this.page);
      }
    }

这里是全部放在一起:

http://jsbin.com/luwitudu/9/edit