Question

我有一个URL数组，在循环之后我无法呈现我的内容。正常绑定似乎不起作用。如果我删除重复并使用1 ajax端点工作，但是我需要从两个端点提取数据并将其合并以进行渲染。我也尝试过：

document.querySelector('polymer-letters').model = this.letters;

没有任何运气。我在Polymers模式中错过了什么？

工作：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>

Answer 1

我对你的broken示例感到有点困惑，因为你已经定义了从未使用过的东西（例如parse2和lettersOld），我不确定是什么你的AJAX调用应该返回。

话虽如此，如果我理解您的一般问题，那么您尝试指定多个返回某些JSON内容的网址，并且您希望显示<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设置为包含您的网址的JavaScript数组，因为它是Polymer元素的已发布属性。您无需对setAttribute和JSON进行任何操作即可。

您可以使用handleAs="json"中的<core-ajax>自动解析JSON响应。

我在我的示例中使用了一些YouTube API网址，因为我不知道应该返回data/letters.json。您需要更改parse处理程序中的逻辑，以正确处理从实际数据源返回的内容。

最重要的是，我将this.videos（类似于您的this.letters）设置为每次调用parse时返回的所有结果的连接版本。否则，每次为每个AJAX响应调用parse时，都会破坏先前响应返回的值。

如何使用Polymer通过多个AJAX调用呈现内容？

1 个答案: