web-dev-qa-db-ja.com

polymer ajaxレスポンスの使用

私が作成した次のpolymer要素があります：

<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内で次のように呼び出しています。

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

Todo配列で返されるすべてのオブジェクトについて、<span>が印刷されます。ただし、アプリを実行すると、コンソールに次の出力が表示されます。

Uncaught TypeError：未定義のプロパティ 'todos'を読み取れません

polymer.html line 1001

ここで何が起こっているのか、ajax応答から受信したデータを参照する方法がわかりません。

javascriptajaxpolymer
6
Ben Thomas

数時間壁に頭をぶつけた後、私はなんとかこれを解決することができました。 todosであるArrayというパブリックプロパティを持つajax-serviceという独自の要素を作成しました。この要素では、iron-ajax要素を使用してajax呼び出しを実行します。

Ajaxが完了すると、関数が呼び出され、応答がtodosプロパティに設定されます。また、キーreflectToAttributeとnotifyをtrueに設定しました。これは、todosプロパティの値がホストノードの属性に反映され、双方向バインディングに使用できることを意味します（詳細については、 ここ を参照してください）。

私のtask-list-app要素は次のとおりです。

<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-service要素：

<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>

このようにすることで、要素に設定する前にon-response関数のデータを編集できるようになります。

6
Ben Thomas

スクリプトで使用する前に、プロパティを定義する必要があります。

<script>
  Polymer({
    is: "task-list-app",
    properties: {
      todos: {
        type: Array,
        notify: true
      }
    },

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