采用高分子Ajax响应 [英] Using polymer ajax response

问题描述

我有我创建了以下聚合物的元素：

I have the following polymer element which I have created:

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

<dom-module id="task-list-app">
    <style>
        :host {

        }
    </style>
    <template>
        <iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"></iron-ajax>
        <template is="dom-repeater" items="{{todos}}">
            <span>hello</span>
        </template>
    </template>
</dom-module>

<script>
    Polymer({
        is: "task-list-app",
        created: function () {
            this.todos = [];
        },

        handleResponse: function (data) {
            this.todos = data.detail.response;
        }
    });
</script>

我在我的index.html里面做调用此：

I am calling this inside my index.html by doing:

<task-list-app></task-list-app>

我期待的待办事项数组中的每个对象返回一个＆LT;跨度＆GT; 将被打印出来。然而，当我运行的应用程序，我得到在控制台下面的输出：

I am expecting that for every object returned in the todo array, a <span> will be printed. However, when I run the app, I get the following output in the console:

未捕获的类型错误：无法读取的未定义的属性待办事项

Uncaught TypeError: Cannot read property 'todos' of undefined

在 polymer.html行1001

我不知道这里发生了什么，以及如何引用从Ajax响应接收回的数据。

I am not sure what is happening here and how to reference the data received back from the ajax response.

推荐答案

敲我的头撞墙了几个小时，我已成功地解决了这个之后。我创建了我叫自己的元素 AJAX服务，有所谓的公共属性待办事项这是一个阵列。在这个单元，我用的是铁AJAX 元素做Ajax调用。

After banging my head on the wall for a few hours I have managed to solve this. I have created my own element called ajax-service that has a public property called todos which is an Array. In this element, I use the iron-ajax element to do the ajax call.

在AJAX完成后，一个函数被调用和响应设置在待办事项属性。我还设置键 reflectToAttribute 和通知为true。这意味着待办事项属性值将被反射回主机节点上的属性，它可用于双向绑定（见的此处获取更多信息）。

When the ajax is complete, a function is called and the response is set on the todos property. I have also set the keys reflectToAttribute and notify to true. This means the todos property's value is reflected back to the attribute on the host node and that it is available for two-way binding (see here for more information).

我的任务列表应用程序元素如下：

<link rel="import" href="ajax-service.html">
<link rel="import" href="task-item.html">
<link rel="import" href="tiny-badge.html">

<dom-module id="task-list-app">
    <style>
        :host {

        }
    </style>
    <template>
        <ajax-service todos="{{todos}}"></ajax-service>
        <template is="dom-repeat" items="{{todos}}">
            <task-item task="{{item}}"></task-item>
        </template>
        <div>
            <tiny-badge>[[todos.length]]</tiny-badge> total tasks
        </div>
    </template>
</dom-module>

<script>
    Polymer({
        is: "task-list-app"
    });
</script>

和我的 AJAX服务元素：

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

<dom-module id="ajax-service">
    <style>
        :host {

        }
    </style>
    <template>
        <iron-ajax auto url="../tasks.json" handle-as="json" on-response="tasksLoaded"></iron-ajax>
    </template>
</dom-module>

<script>
    Polymer({
        is: "ajax-service",
        properties: {
            todos: {
                type: Array,
                reflectToAttribute: true,
                notify: true
            }
        },
        attached: function () {
            this.todos = [];
        },
        tasksLoaded: function (data) {
            this.todos = data.detail.response;
        }
    });
</script>

这样做，这样意味着我能够在元素上设置前的的响应函数编辑数据。

这篇关于采用高分子Ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！