将 iron-ajax 数据绑定到模板

Question

我有一个 Polymer (1.0) 应用程序，它从 AJAX 加载 books 列表：

book-service/book-service.html:

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

<dom-module id="book-service">
    <style>

    </style>

    <template>
        <iron-ajax
          auto
          url="https://example.com/books.json"
          handle-as="json"
          on-response="booksLoaded"></iron-ajax>
    </template>

    <script>
    Polymer({
        is: 'book-service',

        properties: {
            books: { type: Array }
        },

        created: function(){
            this.books = [];
        },

        booksLoaded: function(request){
            this.books = request.detail.response
        }
    });
    </script>
</dom-module>

components/book-list.html:

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

<dom-module id="book-list">
    <style>

    </style>

    <template>
        <book-service id="service" books="{{books}}"></book-service>

        <div>
            <div>Books:</div>
            <ul>
            <template is="dom-repeat" items="{{books}}">
                <li>{{item.title}}</li>
            </template>
            </ul>
        </div>
    </template>

    <script>
    Polymer({is: 'book-list'});
    </script>
</dom-module>

虽然我可以确认 AJAX 请求正在接收 JSON，但 DOM 中没有任何变化。然后我注意到 Polymer 1 数据绑定指南中的注释，即突变需要使用 Polymer 方法，所以我尝试了显示的内容，响应处理程序变成了这样：

booksLoaded: function(request){
    this.push('books', request.detail.response);
}

但现在我得到一个错误！ Uncaught TypeError: Cannot read property 'concat' of undefined

我如何实际将 AJAX 响应绑定到模板？

Answer 1

使用notify 属性将属性更改向上传播以进行绑定。

properties: {
    books: { type: Array, notify: true }
},

此外，您还可以通过以下方式减少 booksLoaded 和 created 函数：

<dom-module id="book-service">
    <template>
        <iron-ajax
          auto
          url="https://example.com/books.json"
          handle-as="json"
          last-response="{{books}}"></iron-ajax>
    </template>

    <script>
    Polymer({
        is: 'book-service',
        properties: {
            books: {
              type: Array,
              notify: true,
              value: function(){return []}
            }
        }
    });
    </script>
</dom-module>