访问聚合物元素属性，在聚合物属性内部答案

【问题标题】：access polymer elements attribute, inside of a polymer attribute访问聚合物元素属性，在聚合物属性内部
【发布时间】：2014-08-13 17:34:25
【问题描述】：

我正在尝试访问另一个聚合物元素内部的聚合物元素的属性

因此，当单击 flatter-navbar-toggle 时，我希望 flatter-navbar 知道，以便我可以根据属性更改一些样式。

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="flatter-navbar-toggle" on-click="{{ toggle }}" attributes="toggled">
    <template>
        <link rel="stylesheet" href="flatter-navbar-toggle.css"/>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </template>
    <script>
        Polymer('flatter-navbar-toggle', {
            toggled: false,
            toggle: function () {
                this.toggled = this.toggled === true ? false : true;
            }
        })
    </script>
</polymer-element>

<polymer-element name="flatter-navbar">
    <template>
        <flatter-navbar-toggle id="flatterNavbarToggle">

        </flatter-navbar-toggle>

        <div id="flatterNavbarBody">
            <content>

            </content>
        </div>
    </template>
    <script>
        Polymer('flatter-navbar', {
            toggledChanged: function () {
                if (this.$.flatterNavbarToggle.toggled) {
                    this.$.flatterNavbarBody.style.display = 'block';
                } else {
                    this.$.flatterNavbarBody.style.display = 'none';
                }
            }
        })
    </script>
</polymer-element>

【问题讨论】：

标签： polymer

【解决方案1】：

您可以像这样将flatter-navbar 绑定到flatter-navbar-toggle toggle 属性。

<polymer-element name="flatter-navbar" noscript>
  <template>
    <flatter-navbar-toggle toggled="{{toggled}}"></flatter-navbar-toggle>
    <template if="{{toggled}}">
      <div><content></content></div>
    </template>
  </template>
</polymer-element>

这里的jsbin例子http://jsbin.com/pusoj/1

【讨论】：