Polymer 1.0 <iron-ajax> inside of a dom-repeat

Question

I am trying to use

<template is="dom-repeat" as="plugin" items="{{plugins}}">

to loop through an array of objects, and then for each of the objects in this array generate a url to fetch data from. This data I want to then put into the page.

My element looks like this:

 <link rel="import" href="../../bower_components/polymer/polymer.html"> <script src="../../scripts/plugins.js"></script> <dom-module id="sidenav-list"> <template> <template is="dom-repeat" as="plugin" items="{{plugins}}"> <template is="dom-if" if="{{plugin.sidenav}}"> <iron-ajax auto url="{{_generatePluginUrl(plugin)}}" handle-as="text" last-response="{{plugin.ajax}}"></iron-ajax> <html-echo html="{{plugin.ajax}}"></html-echo> </template> </template> </template> <script> Polymer({ is: 'sidenav-list', ready: function() { this.plugins = allAddons(); }, _generatePluginUrl: function(plugin) { var newURL = "./plugins/" + plugin.folder + "/" + plugin.file; return newURL; }, }); </script> </dom-module> 

The problem is that is I set last-response="pluginAjax" I end up with duplicates, and when I set it to plugin.ajax the result is just undefined.

Answer 1

From the documentation (via the comments) -- linking here because the documentation viewer does not allow linking directly to the dom-repeat doc page.

https://github.com/Polymer/polymer/blob/0f8483da48dc3747f3c4bdd439b95c4bce2897d7/src/lib/template/dom-repeat.html#L59s

You can achieve this goal by using

event.model.set('item.ajax, event.detail.response)

in your on-response handler's function.

ie: if your iron-ajax looked like this:

<iron-ajax auto url="{{_generatePluginUrl(plugin)}}" handle-as="text"
           on-response="_hresponse"></iron-ajax>

Then your handler in your element would look like:

Polymer({
    //...
    _hresponse: function(request){
        request.model.set('plugin.ajax', request.detail.response);
    }
});