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);
}
});
objectivebanks
increated
callback instead ofready
. – Walid Ammar