Question

我正在尝试执行与其他问题iron-selector selected={{}} binding with iron-pages selected={{}}相同的基本任务，但我相信我的情况必须不同，因为我无法复制解决方案。

我想要一个带iron-selector的按钮菜单，点击后，iron-pages的内容应该会改变。

所以我的实际页面about.htm有一个用于按钮菜单的web组件，名为about-buttons.htm，然后是每个页面的1个webcomponent，应根据用户推送的按钮加载; about-who.htm，about-manifesto和about-team。

我的问题是：

如何使用我的Web组件的这种结构将我的按钮与我的页面绑定 - 和/或为什么我当前的方法错了？

有很多不同的方法可以像这样做一个简单的数据绑定。我的方法绝对不简单，它不起作用（通过点击按钮，页面不会改变）。

所以我的about.htm看起来像这样（这是人们将访问的页面）：

    <about-buttons selected="{{who}}">
    </about-buttons>

    <about-iron-pages attr-for-selected="name" selected="{{who}}" fallback-selection="who">   
        <about-us name="who">
        </about-us> 
        <about-manifesto name="manifesto">
        </about-manifesto>
        <about-team name="team">
        </about-team>    
    </about-iron-pages>

我的about-buttons.htm看起来像这样：

            <iron-selector 
                attr-for-selected="name" 
                selected="{{buttonSelected}}" 
                fallback-selection="who" 
                class="f-column f-column_3 f-column_mobile_2">
                <button class="f-button-group__button" name="manifesto">Manifesto</button>
                <button class="f-button-group__button" name="who">Who we are</button>
                <button class="f-button-group__button" name="team">Team</button>
            </iron-selector>

使用此脚本：

<script>
  Polymer({
    is: 'about-buttons',
    properties: {
        buttonSelected: {
            type: String,
            notify: true,
            value: 'who'
        }
    }
  });
</script>

这是我的iron-pages版本：

<dom-module id="about-iron-pages">
    <template>
        <style>
            :host {
                display: block;
            }
            :host > ::content > :not(.iron-selected) {
                display: none !important;
            }
        </style>
        <content>
        </content>
    </template>
    <script>
        Polymer({
          is: 'about-iron-pages',
          behaviors: [
            Polymer.IronResizableBehavior,
            Polymer.IronSelectableBehavior
          ],

          properties: {
            activateEvent: {
              type: String,
              value: null,
            }
          },
          observers: [
            '_selectedPageChanged(selected)'
          ],
          _selectedPageChanged: function(selected, old) {
            this.async(this.notifyResize);
          }
        });
    </script>
</dom-module>

Answer 1

正如已经指出的那样，<about-buttons selected="...">中的属性与实际属性名称不匹配。对于<about-buttons>.buttonSelected，您的属性应为button-selected，这是使代码工作所需的代码唯一更改（plunker）：

<about-buttons button-selected="{{who}}" ...>

对于<about-buttons>和<about-iron-pages>的需求，可能有更多的上下文，但是，如果您只是尝试实现选项卡式视图，则可以使用Polymer的组件。具体而言，<about-buttons>可由<paper-tabs>和<about-iron-pages>替换为<iron-pages>（plunker）。

如何将铁选择器正确绑定到铁页？

1 个答案: