Question

要在我的网站上导航，我希望能够从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>

Answer 1

通过设置 valueattr 属性（core-selector documentation，

core-menu 可以使用子元素的任何属性作为其选定的值）。

我建议为每个 paper-item 提供一个ID（比如id='home'）并将 valueattr 设置为valueattr='id'。

然后你可以写this.$.mainMenu.selected = 'home'。

聚合物按名称选择核心菜单的值

1 个答案: