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

Question

I am trying to access the attribute of an polymer element inside of an other polymer element

So, when the flatter-navbar-toggle is clicked I want the flatter-navbar to know so I can change some styling based on the attribute.

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

Answer 1

You can bind to the flatter-navbar to the flatter-navbar-toggle toggle attribute like this.

<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 example here http://jsbin.com/pusoj/1