Полимер 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

Вы можете сделать это .. Добавить атрибут данных маршрут к вашей работе -submenu и привязать его к выбранному атрибуту вложенного бумажного меню.

<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>