聚合物数据绑定-

Question

Can someone tell me where i'm going wrong? I have an element system-menu that queries for data using iron-ajax then i'm supposed to bind that data to my template.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html">

<dom-module id="system-menu">
    <template>
    <iron-ajax
        auto
        url="{{url}}"
        params='{"ajax":"true"}'
        handle-as="json"
        on-response="dataLoaded"
        debounce-duration="300">
    </iron-ajax>
    <div class="content"><content></content></div>
</template>

</dom-module>

<script>
    (function() {
        Polymer({
            is: 'system-menu',
            behaviors: [
                Polymer.IronMenubarBehavior
            ],
            ready: function() {
            },
            properties: {
                data: {
                    type: Object,
                    reflectToAttribute: true,
                    notify: true
                }
            },
            attached: function () {
                this.data = [];
            },
            dataLoaded: function (data) {
                this.data = data.detail.response;
            }
        }); 
    })();
</script>

`

This is how I use the element,

<link rel="import" href="/themes/_components/custom_components/system-menu/system-menu.html">

    <system-menu class="list" url="www.some.site/widget/system-menu-widget/-menuRequest/">
        <template is="dom-repeat" items='{{data}}'>
            <li>{{item.label}}<li>
        </template>
    </system-menu>`

For some reason, the {{data}} isnt binding anything. It just shows {{data}} in the chrome inspect element console

Answer 1

要访问data从加载system-menu的外部system-menu元素，您需要将其添加为一个属性：

<system-menu class="list" url="www.some.site/widget/system-menu-widget/-menuRequest/" data="{{data}}">