我有一个 URL 数组，在遍历它之后我无法呈现我的内容。正常绑定(bind)似乎不起作用。如果我删除重复并使用 1 个 ajax 端点工作，但是我需要从两个端点提取数据并将其合并以进行渲染。我也试过:
document.querySelector('polymer-letters').model = this.letters;
没有任何运气。我在 polymer 模式中错过了什么？
工作:https://gist.github.com/denishoctor/d857f11fa0be79c29fab
损坏: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>
最佳答案
我对你的 broken 有点困惑例如，由于您定义了从未使用过的内容(例如 parse2 和 lettersOld)，因此我不确定您的 AJAX 调用应该返回什么。
话虽这么说，如果我理解你的一般问题，你正试图指定返回一些 JSON 内容的多个 URL，并且你想显示所有 URL 返回的所有内容 <template>在你的元素中。
如果是这种情况，下面是您可以执行此操作的一种方法的示例。 (现场版在 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>
你应该设置polymerLetters.urls到包含您的 URL 的 JavaScript 数组，因为它是 Polymer 元素的已发布属性。您无需对 setAttribute 执行任何操作和 JSON 化你的数组。
您可以使用 handleAs="json"在<core-ajax>自动解析 JSON 响应。
我在示例中使用了一些 YouTube API URL，因为我不知道 data/letters.json 是什么应该返回。您想要更改 parse 中的逻辑处理程序以正确处理从您的实际数据源返回的内容。
最重要的是，我正在设置 this.videos (类似于您的 this.letters )到每次返回的所有结果的串联版本 parse叫做。否则，每次parse为每个 AJAX 响应调用，您会破坏从先前响应返回的值。
关于javascript - 如何使用 Polymer 渲染具有多个 AJAX 调用的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24486521/