Question

我试图访问其他聚合物元素中的聚合物元素的属性

所以，当点击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>

Answer 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

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

1 个答案: