iron-selector selected={{}} 绑定 iron-pages selected={{}} (Switcheroo)

Question

所以我用 iron-selector 制作了一个自定义菜单，并将其放在另一个包含 iron-pages 的自定义元素上，我无法将菜单按钮与页面内容绑定。基本上是一个带有自定义元素的 Switcheroo。这是一些代码（简化）：

我的菜单

<dom-module id="my-menu">
  <style>
    :host {display: inline-block;        }
  </style>    
  <template>
    <iron-selector id="menu" selected="{{menuSelected}}" attr-for-selected="name-menu">
      <div name-menu="portfolio" class="button"></div>
      <div name-menu="about" class="button"></div>
      <div name-menu="contact" class="button"></div>
    </iron-selector>
  </template>

  <script>
    Polymer({
      is: 'my-menu',
      behaviors: [Polymer.IronSelectableBehavior],
      poperties:{
        menuSelected:{
          type: String,
          value: 'portfolio'
        }
      }
    });
  </script>
</dom-module>

和我的页面

<dom-module id="my-pages">
  <style>
    :host {display: inline-block;}
  </style>

  <template>

    <my-menu menu-selected="{{pageSelected}}"></my-menu>

    <iron-pages attr-for-selected="page" selected="{{pageSelected}}"> 
      <section page="portfolio"> Some Content </section>
      <section page="about"> Some Content </section>
      <section page="contact"> Some Content </section>
    </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'my-pages',
    });
  </script>
</dom-module>

感谢阅读本文！ =)

Answer 1

您可以摆脱 Polymer.IronSelectableBehavior 行为，因为它已经是 iron-selector 加载的依赖项。

您还在 my-menu 元素中拼错了 properties：'poperties'...

Answer 2

您需要将 'notify: true' 添加到 menuSelected。这样 my-pages 就知道 my-menu 何时修改了 menuSelected 的值。也正如其他人提到的，您需要修复属性的拼写。更改如下：

  properties:{
    menuSelected:{
      type: String,
      notify: true,
      value: 'portfolio'
    }
  }

iron-selector selected={{}} 绑定 iron-pages selected={{}} (Switcheroo)

iron-selector selected={{}} binding with iron-pages selected={{}} (Switcheroo)

polymer-1.0