Polymer data binding -

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

I think the data must be exposed in some way before you can use it within the `dom-repeat` template. You could publish it as a read-only property for `system-menu` and then add something like `item-data="[[data]]"` to your used element. — idleherb, Jul 03 '15 at 11:31
@idleherb is correct. See the answer [here](http://stackoverflow.com/a/30616297/4961460) for help on how to do this. — Ben Thomas, Jul 03 '15 at 13:18
@Ben Thomas , i edited my question according to your suggestion but still nothing is showing up. Its still showing up as {{data}} after binding. and getting an error `Polymer::Attributes: couldn`t decode Array as JSON` — Nelson Owalo, Jul 04 '15 at 14:46
when you use `system-menu`, you need to set the `data` attribute on it. For instance: ``. Have you tried this? — Ben Thomas, Jul 06 '15 at 14:33
@BenThomas thanks, its binding now. But still I cant use it. `` now shows up as `` but how do i use it in `` still getting ** couldn`t decode Array as JSON** — Nelson Owalo, Jul 07 '15 at 10:21

score 0 · Accepted Answer · answered Jul 08 '15 at 08:36

0

To access the data loaded from the system-menu outside of the system-menu element, you need to add it as an attribute:

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

answered Jul 08 '15 at 08:36

Ben Thomas

3,180
2
20
38

Polymer data binding -

1 Answers1