I have a URLs array and after looping through it I'm unable to render my content. The normal binding doesn't seem to work. If I remove the repeat and work with 1 ajax endpoint things work, however I have a need to pull data from two endpoints and merge it for rendering. I also tried:
document.querySelector('polymer-letters').model = this.letters;
without any luck. What have I missed in Polymers pattern?
Working: https://gist.github.com/denishoctor/d857f11fa0be79c29fab
Broken: https://gist.github.com/denishoctor/6c36a9d9d310c81a8207
<polymer-element name="polymer-letters" attributes="urls">
<template>
<h1>{{urls}}</h1>
<template repeat="{{url in urls}}">
<core-ajax url="{{url}}" auto response="{{resp}}" on-core-response="{{parse}}"></core-ajax>
</template>
<template repeat="{{ letter in letters }}">
{{ letter }}
</template>
</template>
<script>
Polymer('polymer-letters', {
ready: function() {
this.lettersOld = ['a', 'b', 'c'];
},
parse: function(event, detail, ajaxNode) {
console.log(event.detail.response)
this.letters = event.detail.response;
},
parse2: function(event, detail, ajaxNode) {
console.log(event.detail.response)
this.letters = event.detail.response;
}
});
</script>
</polymer-element>
<script>
var urls = ["data/letters.json"],
polymerLetters = document.createElement("polymer-letters");
polymerLetters.setAttribute('urls', JSON.stringify(urls));
document.body.appendChild(polymerLetters);
window.addEventListener('polymer-ready', function() {
console.dir(polymerLetters);
});
</script>
I'm a little confused about your broken example, since you have things defined (e.g. parse2 and lettersOld) that are never used, and I'm not exactly sure what your AJAX call is supposed to return.
That being said, if I understand your general question, you're trying to specify multiple URLs which return some JSON content, and you want to display all of the content returned by all of the URLs in a <template> within your element.
If that's the case, here's an example of one way you could do that. (Live version at http://jsbin.com/qecat/5/edit)
<body>
<polymer-element name="polymer-letters" attributes="urls">
<link rel="import" href="https://cdn.rawgit.com/Polymer/core-ajax/master/core-ajax.html">
<template>
<h1>{{urls}}</h1>
<template repeat="{{url in urls}}">
<core-ajax url="{{url}}" auto handleAs="json" on-core-response="{{parse}}"></core-ajax>
</template>
<ul>
<template repeat="{{ video in videos }}">
<li>{{ video.title }}</li>
</template>
</ul>
</template>
<script>
Polymer('polymer-letters', {
videos: [],
urls: [],
parse: function(e) {
this.videos = this.videos.concat(e.detail.response.data.items);
}
});
</script>
</polymer-element>
<script>
window.addEventListener('polymer-ready', function() {
var urls = [
"http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&max-results=5&q=testing",
"http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&max-results=5&q=polymer"
];
var polymerLetters = document.createElement("polymer-letters");
polymerLetters.urls = urls;
document.body.appendChild(polymerLetters);
});
</script>
</body>
You should set polymerLetters.urls to the JavaScript Array containing your URLs, since it's a published property of the Polymer element. You don't need to do anything with setAttribute and JSON-ifying your array.
You can use handleAs="json" in the <core-ajax> to automatically parse the JSON response.
I'm using some YouTube API URLs in my example, since I don't know what data/letters.json should return. You'd want to change the logic in the parse handler to properly process what's returned from your actual data source.
Most importantly, I'm setting this.videos (analogous to your this.letters) to the concatenated version of all of the results that are returned each time parse is called. Otherwise, each time parse is called for each AJAX response, you'd clobber the values that were returned from previous responses.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments