0
votes

I am dabbling with version 0.5.1 of Polymer and trying to create my own web components. First attempt is trying to create a selector object that populates the options remotely, via ajax. All examples I found online use hard-coded lists. However, my remote options render outside of the dropdown menu, to the right as a basic list -- I suspect because the paper-dropdown-menu item does not re-render itself after the ajax data is returned. How can I force a refresh / re-rendering of the embedded paper-dropdown-menu element? Or, how should I work with remote data and paper-dropdown-menu?

I have looked in the docs, but the data binding seems automatic, and I cannot find a method for refreshing in Chrome dev tools. I get no errors in the console, it just looks funny and never collapses. The on-core-select method is triggered when I select an item, so the data seems bound properly.

My element:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/core-selector/core-selector.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-signals/core-signals.html">
<link rel="import" href="../elements/custom-selector-item.html">

<polymer-element name="custom-selector" attributes="host objectivebanks">
    <template>
        <template if="{{objectivebanks.length == 0}}">
            <core-ajax auto url="https://{{host}}/objectivebanks" on-core-response="{{updateBankList}}" on-core-error="{{onError}}"></core-ajax>
        </template>
        <paper-dropdown-menu label="Objective Banks" on-core-select="{{publishBankSelect}}">
            <paper-dropdown class="dropdown">
                <core-selector class="menu">
                    <template repeat="{{bank in objectivebanks}}">
                        <custom-selector-item name="{{bank.displayName}}" myId="{{bank.id}}">
                        </custom-selector-item>
                    </template>
                </core-selector>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>
    <script>
        Polymer('custom-selector', {
            ready: function () {
                this.host = this.host || 'example.com';
                this.objectivebanks = this.objectivebanks || [];
            },
            onError: function (e, resp) {
                console.log('error!: ' + resp.response);
            },
            publishBankSelect: function (e, detail, sender) {
                if (detail.isSelected) {
                    this.fire('core-signal', {
                        'name'  : "bankselected",
                        'data'  : detail.item
                    });
                }
            },
            updateBankList: function (e, resp) {
                console.log('here');
                this.objectivebanks = JSON.parse(resp.response);
            }
        });
    </script>
</polymer-element>

==========================================

UPDATE 1

With Mohammad's suggestion, I updated my Polymer() code to the below (still does not work properly):

Polymer('custom-selector', {
        ready: function () {
            this.host = this.host || 'example.com';
        },
        created: function () {
            this.objectivebanks = this.objectivebanks || [];
        },
        onError: function (e, resp) {
            console.log('error!: ' + resp.response);
        },
        publishBankSelect: function (e, detail, sender) {
            if (detail.isSelected) {
                this.fire('core-signal', {
                    'name'  : "bankselected",
                    'data'  : detail.item
                });
            }
        },
        updateBankList: function (e, resp) {
            console.log('here');
            this.objectivebanks = JSON.parse(resp.response);
        }
    });
1
Try to initiate objectivebanks in created callback instead of ready.Walid Ammar
Hi @MohammadWalid, thanks for the suggestion (sorry for late reply). I tried that but still does not work. The updated section is pasted above, for reference.user

1 Answers

0
votes

Solution -- I needed to include paper-dropdown.html in my link imports, plus install the latest web-animations-js from https://github.com/web-animations/web-animations-js.