As far as my limited understanding goes, there's two different approaches
you can take. The first is the declarative way where everything is wired-up
for you, and the second is via an on-response method like you've tried.
First method:
add a response attribute to your core-ajax element to wire up automatic
data-binding.
<core-ajax
url="../ajax-connect.php?action=listLocalSourceNamed"
handleAs="json"
auto
response="{{listData}}"
></core-ajax>
Second method:
You've nearly got this method correct, but your listData variable is
outside the scope of your element.
handleResponse:function(data)
{
this.listData = data.detail.response;
}
it's advisable to use a created() function to pre-declare the listData
variable with an empty array. So alongside your handleResponse() function
you need something like:
created:function()
{
this.listData = [];
}
On 5 December 2014 at 14:14, actcont pr <[email protected]> wrote:
> Hoi. For two days now I'm trying to correctly and successfully react to a
> successful ajax call in Polymer. I don't seem to get the hang of it. Data
> Binding seems to be of no use, since it doesn't react to the updated
> variable. Or am I misssing something in the code here? Have I got my scopes
> wrong? ... Some hints would be helpful. Commented code below
>
>
> [...] *//opening element, styles (this whole element is practially the
> main app)*
> <core-scaffold id="core_scaffold">
> <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
> <core-toolbar id="core_toolbar">
> <core-icon icon="av:equalizer"></core-icon>
> <b>ANL</b>
> </core-toolbar>
> <core-menu valueattr="label" id="core_menu" theme="core-light-theme"
> selected="0">
> <core-item
> id="core_item1"
> icon="assessment"
> label="Charts"
> on-tap="{{showCharts}}"
> horizontal center layout
> ></core-item>
> <core-item
> id="core_item2"
> icon="settings-applications"
> label="Settings"
> on-tap="{{showSettings}}"
> horizontal center layout
> ></core-item>
> <core-item
> id="core_item3"
> icon="view-list"
> label="Lists"
> on-tap="{{showLists}}" *//this stuff works. Funktions below are called
> successfully upon tabl*
> horizontal center layout
> ></core-item>
> </core-menu>
> </core-header-panel>
> <div id="div" tool>Analysis</div>
> <core-pages selected="0" selectedindex="0" notap id="main_pages">
> <section id="chartsPage">Charts Page</section>
> <section id="settingsPage">Settings Page</section>
> <section id="listsPage" active>
> Lists Page
> <core-ajax
> url="../ajax-connect.php?action=listLocalSourceNamed"
> handleAs="json"
> auto
> on-core-response="{{handleResponse}}" *//same here. All ok. handleResonse
> is called.*
> ></core-ajax>
>
>
>
> *//Here it comes. The Card is my 'list'.*
> *//Want to itereate an object (adding items per entry) comming back in
> JSON upon ajax success inside it (this doesn't work):*
> <core-card id="core_card" layout vertical>
> <template bind="*{{listData}}*" repeat="*{{item, itemIndex in listData}}*">
> *// added a template around this one. **I want to repeat Items per entry
> in array. ... Does this work?*
> <core-item id="core_item" icon="polymer" label="*{{item.source}}*"
> horizontal center layout>*{{itemIndex}}*</core-item> *//my core item
> thingie I want to repeat*
> </template>
> </core-card>
>
>
>
>
>
> </section>
> </core-pages>
> </core-scaffold>
> </template>
>
> <script>
> var listData = ""; // Defining the va
> Polymer(
> 'traffimon-main',
> {
> showCharts:function(){
> this.$.main_pages.selected = 0;
> },
> showSettings:function()
> {
> this.$.main_pages.selected = 1;
> },
> showLists:function()
> {
> this.$.main_pages.selected = 2;
> },
> handleResponse:function(data)
> {
> //console.debug(data.detail.response); *// Here's the first thing that
> doesn't feel right.*
> *// I have to dig into data.detail.response to get my JSON.*
> *// Looks as if there's some utility stuff in Polymer for handling this
> which I'm not using. True? ... If so, which is it? how to I use it?
> Examples?*
>
>
>
>
>
> listData = data.detail.response; *// listData get's its Object, but the
> above doesn't react. No list to be seen. No errors either.*
> }
> }
> );
> </script>
>
> </polymer-element>
>
> I've probably got a few things screwed up here, I'd be glad for some help.
> Thanks for Polymer and keep up the good work!
>
> - P. (Team Active Content)
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/498203b7-8766-402d-b710-cf835fb122bf%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/498203b7-8766-402d-b710-cf835fb122bf%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel Llewellyn
Bowl Hat
t: 07500 968 611
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CABtuYwf42Yzx99jo5Y669ncS6j1sy6H8-zxdFunYtYpaceJvXQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
