javascript - polymer 按名称选择的核心菜单值

为了在我的网站上导航，我希望能够从core-menu中的Polymer中选择一个项目。这是我为测试而制作的一些示例代码：jsbin。

您可以在示例中看到，我能够使用this.selectedMenu.label检索所选项目的标签值，而selectedMenu绑定到第一个核心菜单的selectedItem={{selectedMenu}}上。

我还演示了可以使用数字值来更改状态，方法是使用this.$.mainMenu.selected = x，其中x是从0开始的数字值。

现在，我想知道是否可以使用标签名称而不是数字值来更新所选值。

再次是以下代码：

    <polymer-element name='my-app' noscript>
      <template>
        <style>
          paper-item.core-selected {
            color: #99182c;
            fill: #99182c;
          }
        </style>
        <core-menu selected="0" selectedItem="{{selectedMenu}}" id="mainMenu" on-core-select="{{mainMenu}}">
          <paper-item icon="home" label="Home"></paper-item>
          <paper-item icon="today" label="Activities"></paper-item>
          <paper-item icon="account-box" label="People"></paper-item>
          <paper-item icon="theaters" label="Pictures"></paper-item>
          <paper-item icon="info" label="Info"></paper-item>
          <paper-item icon="lock" label="Login"></paper-item>
        </core-menu>
        This is the selected item: {{selectedMenu.label}}.<br>
        <div on-tap="{{forceStateHome}}">Force state home</div>
      </template>
      <script>
        Polymer("my-app", {
          mainMenu: function(){
            console.log("New item selected: " + this.selectedMenu.label);
          },
          forceStateHome: function(){
            console.log("Forcing state to home...");
            this.$.mainMenu.selected = 0; //I want to use a name, not number
          }
        });
      </script>
    </polymer-element>

最佳答案

核心菜单可以通过设置valueattr属性（core-selector documentation）将子元素的任何属性用于其选定值。

我建议给每个纸项目一个ID（例如id='home'），并将valueattr设置为valueattr='id'。

然后，您可以编写this.$.mainMenu.selected = 'home'。

关于javascript - polymer 按名称选择的核心菜单值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24882843/