Polymer 1.0 服务问题

Question

我正在开发一个使用 polymer 的 reddit 客户端来检查网络组件技术。我从 0.5 版本开始，最近又回到了这个项目。当我发现 polymer 发布了 1.0 时，我重新开始（因为它不是那么先进）。

我有一项服务使用 iron-ajax 请求 reddit api 并查找帖子。这是代码：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="reddit-list-service">
    <template>
        <iron-ajax
            url='https://www.reddit.com/new.json'
            handle-as='json'
            debounce-duration="300"
            on-response='handleResponse'
            debounce-duration="300"
            auto>

        </iron-ajax>
    </template>
</dom-module>

<script>
    (function () {
        Polymer({
            is: 'reddit-list-service',
            properties: {
                modhash: {
                    type: String,
                    value: function() {
                        return '';
                    }
                },
                posts: {
                    type: Array,
                    value: function () {
                        return [];
                    }
                },
                after: {
                    type: String,
                    value: function () {
                        return '';
                    }
                }
            },

            // Update object properties from the ajax call response
            handleResponse: function (resp) {
                this.properties.modash = resp.detail.response.data.modhash;
                this.properties.posts = resp.detail.response.data.children;
                this.properties.after = resp.detail.response.data.after;
                this.post = this.properties.posts; // just to try
                console.log(this.properties.posts);
            }
        });
    })();
</script>

我的日志显示我收到来自 API 的帖子，这太棒了！

当我想使用此服务从帖子数组中创建列表时出现问题，我不知道如何将它们放入下面的列表组件中：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../reddit-list-service/reddit-list-service.html">

<dom-module id="reddit-post-list">
    <template>
        <reddit-list-service posts="{{posts}}">
        </reddit-list-service>

        <template is="dom-repeat" id="post-list" posts="{{posts}}">
            <p>{{post.author}}</p>
        <template>
    </template>
</dom-module>

<script>
    (function () {
        Polymer({
            is: 'reddit-post-list',
            properties: {
            },
        });
    })();
</script>

我已经尝试了几个我在文档中看到的想法，但我无法弄清楚作者属性没有出现是怎么回事。

有线索吗？

Answer 1

这里有些地方不太对劲。在 reddit-post-list 中，您没有正确使用 dom-repeat 模板。见下文：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="reddit-list-service.html">

<dom-module id="reddit-post-list">
    <template>
        <reddit-list-service posts="{{posts}}"></reddit-list-service>
        <template is="dom-repeat" items="[[posts]]">
             <p>{{item.data.author}}</p>
        </template>
    </template>
</dom-module>

<script>
    Polymer({
        is: "reddit-post-list"
    });
</script>

您需要一个名为 items 的属性，它是 dom-repeat 将迭代的数组。在迭代中，您需要引用 item，因为这是当前迭代的数组项。 Here 是文档。

对于您 reddit-list-service，您需要在 posts 属性上将 reflectToAttribute 和 notify 属性设置为 true。这意味着对此属性的任何更改都会反映回 reddit-list-service 元素的 posts 属性。有关详细信息，请参阅 here。

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">

<dom-module id="reddit-list-service">
    <template>
        <iron-ajax auto url="https://www.reddit.com/new.json" handle-as="json" on-response="handleResponse"></iron-ajax>
    </template>
</dom-module>

<script>
    Polymer({
        is: "reddit-list-service",
        properties: {
            modhash: {
                type: String,
                value: ""
            },
            posts: {
                type: Array,
                value: function () {
                    return [];
                },
                reflectToAttribute: true, // note these two new attributes
                notify: true
            },
            after: {
                type: String,
                value: ""
            }
        },

        // Update object properties from the ajax call response
        handleResponse: function (resp) {
            this.modash = resp.detail.response.data.modhash;
            this.posts = resp.detail.response.data.children;
            this.after = resp.detail.response.data.after;
        }
    });
</script>

我还整理了以下内容：

从 <script> 标签中删除了立即调用的函数包装器，因为不需要这些。
引用元素中的属性时，您只需使用 this.PROPERTYNAME 而不是 this.properties.PROPERTYNAME。
查看返回的 JSON 后，author 属性似乎在另一个名为 data 的属性上。
当您在元素中为属性声明一个值时，如果属性类型是 Object 或 Array.

Polymer 1.0 服务问题

Polymer 1.0 services issue

web-component

polymer