Binding iron-ajax data to a template - ajax

Question

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?

Answer 1

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>