纸张菜单中的聚合物 1.0 纸张子菜单

Question

然后我在外部纸质菜单中选择一个项目，然后导航到我的子菜单并在那里选择一个项目，外部项目仍然被选中。反之亦然：

<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
 <a data-route="one" href="{{baseUrl}}">
  <iron-icon icon="home"></iron-icon>
  <span>one</span>
 </a>
 <paper-submenu>
  <paper-item class="menu-trigger">two</paper-item>
  <paper-menu class="menu-content">
    <a data-route="two-1" href="{{baseUrl}}two-1">
     <paper-item>
      <iron-icon icon="home"></iron-icon>
      <span>two 1</span>
     </paper-item>
    </a>
    <a data-route="two-2" href="{{baseUrl}}two-2">
     <paper-item> 
      <iron-icon icon="info"></iron-icon>
      <span>two 2</span>
     </paper-item>
    </a>
  </paper-menu>
 </paper-submenu>
 <a data-route="users" href="{{baseUrl}}users">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
 </a>

 <a data-route="contact" href="{{baseUrl}}contact">
  <iron-icon icon="mail"></iron-icon>
  <span>Contact</span>
 </a>
</paper-menu>

知道怎么解决吗？

Answer 1

这可以通过点击以编程方式管理菜单打开属性来完成：

<dom-module id="menu-nav">
    <template>
        <!-- define route for 'view', e.g. /:view -->
        <!-- define route for 'subview', e.g. /bar/:subview -->

        <paper-menu selected="{{view}}" attr-for-selected="name">
            <paper-item name="foo" on-tap="_onFoo">
                Foo
            </paper-item>

            <paper-submenu opened="{{_isSubmenu(view, _inSubmenu)}}">
                <paper-item on-tap="_onSubmenu" class="menu-trigger">
                    Bar
                </paper-item>

                <paper-menu selected="{{subview}}" attr-for-selected="subname" class="menu-content">
                    <paper-item subname="baz" on-tap="{{_onBar}}">
                        Baz
                    </paper-item>
                <paper-menu>
            </paper-submenu>
        <paper-menu>
    </template>

    <script>
        Polymer({
            is: "menu-nav",

            properties: {
                view: {
                    type: String,
                    value: "foo"
                },

                _inSubmenu: {
                    type: Boolean,
                    value: false
                }
            },

            _isSubmenu: function (view, _inSubmenu) {
                return _inSubmenu || view === 'bar';
            },

            _onFoo: function () {
                this.set('_inSubmenu', false);
                // ... transition to next route, this could depend on the router being used
                // for eample, with Excess router, this would be:
                // Excess.RouteManager.transitionTo('/foo');
            },

            _onBar: function () {
                this.set('_inSubmenu', true);
                this.set('subview', undefined);
                // ... transition to /bar/baz
            },

            _onSubmenu: function (e) {
                e.stopPropagation();
                this._onBar();
            },
        });
    </script>
</dom-module>

相关问题：https://github.com/PolymerElements/paper-menu/issues/42

Answer 2

你可以这样做.. 将 data-route 属性添加到您的纸质子菜单并将其与嵌套纸质菜单的选定属性绑定。

<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
 <a data-route="one" href="{{baseUrl}}">
  <iron-icon icon="home"></iron-icon>
  <span>one</span>
 </a>
 <paper-submenu **data-route="[[selectedMenuItem]]"**>
  <paper-item class="menu-trigger">two</paper-item>
  <paper-menu class="menu-content" **selected="{{selectedMenuItem}}"**>
    <a data-route="two-1" href="{{baseUrl}}two-1">
     <paper-item>
      <iron-icon icon="home"></iron-icon>
      <span>two 1</span>
     </paper-item>
    </a>
    <a data-route="two-2" href="{{baseUrl}}two-2">
     <paper-item> 
      <iron-icon icon="info"></iron-icon>
      <span>two 2</span>
     </paper-item>
    </a>
  </paper-menu>
 </paper-submenu>
 <a data-route="users" href="{{baseUrl}}users">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
 </a>

 <a data-route="contact" href="{{baseUrl}}contact">
  <iron-icon icon="mail"></iron-icon>
  <span>Contact</span>
 </a>
</paper-menu>