CODEWITHSUNDEEP
ajaxdata-bindingpolymer
RedBassett
RedBassett

Reputation: 3587

Binding iron-ajax data to a template

I've got a Polymer (1.0) app that loads a list of books from AJAX:

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>

While I can confirm that JSON is being received by the AJAX request, nothing is changed in the DOM. Then I noticed that the note in the Polymer 1 data binding guide that mutation requires use of Polymer methods, so I tried what was shown, and the response handler became this:

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

But now I get an error! Uncaught TypeError: Cannot read property 'concat' of undefined

How do I actually bind the AJAX response to the template?

Upvotes: 2

Views: 2031

Answers (1)

Zikes
Zikes

Reputation: 5886

Use the notify attribute to propagate the property changes up for binding.

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

Additionally, you could whittle off those booksLoaded and created functions with this:

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

Upvotes: 6

Related Questions