javascript - Polymer dropdown data binding with AJAX response -
i'm new js , polymer. can't figure out why not working, i've rewritten millin times based on few topics out there.
the idea have simple dropdown it's choices data bound response of ajax request.
based on logging ajax returning perfectly, data not bound.
can please?
the ajax response:
var text = '{ "employees" : [' + '{ "firstname":"john" , "lastname":"doe" },' + '{ "firstname":"anna" , "lastname":"smith" },' + '{ "firstname":"peter" , "lastname":"jones" } ]}'; scripts , imports (probably more should be, experimenting components)
<script src="../../static/bower/webcomponentsjs/webcomponents.js"></script> <script src="../../static/npm/jquery/dist/jquery.js"></script> <script src="../../static/npm/webanimations/web-animations.min.js"></script> <link rel="import" href="../../static/bower/font-roboto/roboto.html"> <link rel="import" href="../../static/bower/core-header-panel/core-header-panel.html"> <link rel="import" href="../../static/bower/core-toolbar/core-toolbar.html"> <link rel="import" href="../../static/bower/paper-tabs/paper-tabs.html"> <link rel="import" href="../../static/bower/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="../../static/bower/core-ajax/core-ajax.html"> <link rel="import" href="../../static/bower/polymer/polymer.html"> <link rel="import" href="../../static/bower/core-list/core-list.html"> <link rel="import" href="../../static/bower/core-collapse/core-collapse.html" > <link rel="import" href="../../static/bower/core-menu/core-menu.html"> <link rel="import" href="../../static/bower/paper-dropdown/paper-dropdown.html"> <link rel="import" href="../../static/bower/paper-item/paper-item.html"> html
<body> <polymer-element name="custom-selector" attributes="host data"> <template> <template if="{{data.length == 0}}"> <core-ajax auto url="dosql" on-core-response="{{updatedata}}" on-core-error="{{onerror}}" response="{{yourdata}}" </core-ajax> </template> <paper-dropdown-menu label="dropdown data" on-core-select="{{selectdata}}"> <paper-dropdown class="dropdown"> <core-menu class="menu"> <template repeat="{{data in yourdata}}"> <paper-item name="{{data.firstname}}">{{data.firstname}}</paper-item> </template> </core-menu> </paper-dropdown> </paper-dropdown-menu> </template> <script> polymer('custom-selector', { ready: function () { console.log('firing ready'); this.host = this.host || 'example.com'; this.data = this.data || []; }, onerror: function (e, resp) { console.log('onerror'); console.log('error!: ' + resp.response); }, updatedata: function (e, resp) { console.log('firing updatedata'); console.log('ajax response:'); console.log(json.parse(resp.response)); this.data = json.parse(resp.response); console.log('this.data now:'); console.log(this.data); } }); </script> </polymer-element> <custom-selector></custom-selector> </body>
<template repeat="{{data in yourdata}}"> yourdata not array, object. trying achieve this:
<template repeat="{{data in yourdata.employees}}"> i took liberty of improving element bit. hope can learn this, if need further explanation feel free ask.
<polymer-element name="custom-selector" attributes="host data"> <template> <core-ajax id="employeesgetter" handleas="json" url="dosql" on-core-error="{{onerror}}" response="{{data}}"> </core-ajax> <paper-dropdown-menu label="dropdown data" on-core-select="{{selectdata}}"> <paper-dropdown class="dropdown"> <core-menu class="menu"> <template repeat="{{employee in data.employees}}"> <paper-item name="{{employee.firstname}}">{{employee.firstname}}</paper-item> </template> </core-menu> </paper-dropdown> </paper-dropdown-menu> </template> <script> polymer('custom-selector', { data: { employees: [] }, ready: function () { console.log('firing ready'); this.host = this.host || 'example.com'; this.$.employeesgetter.go(); }, onerror: function (e, resp) { console.log('onerror'); console.log('error!: ' + resp.response); } }); </script> </polymer-element>
Comments
Post a Comment