javascript - Polymer 中的循环 WordPress 文章

Question

我想编写一个 polymer 元素来显示一些 WordPress 文章。 http://www.jsv-lippstadt.de/?json=get_category_posts&slug=app <- 这是包含所有帖子的 Json 文件。

我的代码:

<link rel="import" href="../bower_components/polymer/polymer.html">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<polymer-element name="wordpress-post" attributes="from">
<template>
    <h1>Test</h1>
</template>

<script>
    Polymer('wordpress-post', {
        ready: function () {
            alert(this.from);
            $.ajax({
                type: "GET",
                url: "http://www.jsv-lippstadt.de/?json=get_category_posts&slug=" + this.from,
                dataType: 'jsonp',
                error: function () {
                    alert('Unable to load feed, Incorrect path or invalid feed');
                },
                success: function (data) {
                    console.log(data);
                    var arr = $.map(data, function(el) { return el; })
                    console.log(arr);
                }
            });
        },
    })
</script>

这会输出一个 JavaScript 数组。 (console.log(arr))。

那么我如何循环这个数组来显示帖子呢？我不知道如何用 polymer 来做这个。谢谢!

Answer 1

您应该设置一个名为 posts 的内部属性，然后在 ajax 调用返回后将其设置为等于 arr 的值。然后使用a repeat attribute on a template生成帖子。

例如:

<polymer-element name="x-foo">
  <template>
    <template repeat="{{post in posts}}">
      <h2>{{post.title}}</h2>
    </template>
  </template>
  <script>
    Polymer({
      created: function() {
        this.posts = [{title: 'hello'},{title: 'world'}];
      }
    });
  </script>
</polymer-element>

<x-foo></x-foo>