用于模板数据绑定的聚合物回调

Question

I have a template like:

<template id="container" repeat="{{ sheep, i in flock }}" is="auto-binding">
    <svg id="sheep{{i}}"></svg>
</template>

then I load data asynchronously like:

    // ...
    ajaxHandler: function(e){
        // this.flock = e.detail.response;
        this.$.container.flock = e.detail.response;
        draw.call(this);
    }
});

function draw(){
    // this.flock.forEach(function(sheep,i){
    //    this.$['sheep'+i].append(document.createElement("circle"));
    // }.bind(this));
    this.$.container.flock.forEach(function(sheep,i){
       this.$.container.$['sheep'+i].append(document.createElement("circle"));
    }.bind(this));
}

But by the time draw is reached, this.$['sheep'+i] won't have been created yet.

Is there a callback I can use to detect when the DOM elements have been inserted following a template binding?

[EDIT] Have to use the template element as model instead of the this element instance when using auto-binding

[EDIT] After doing more research it turns out that the template-bound event is only fired once when the template is created, but not when it is updated. Once the data is loaded, the model is updated and the draw function gets called synchronously afterward. I suspect the template updates asynchronously when the model observes a change, making this.$.container.$['sheep'+i] unavailable at the time the draw function will execute. I need the draw function to be run asynchronously, after the template has finished updating its nodes.

[EDIT] See jsfiddle with code for testing

Answer 1

Found it! Yay!
You can use Polymer's helper onMutation function (or perhaps vanilla MutationObserver )

ready: function(){
  this.onMutation(this.shadowRoot, function(observer, mutations){
    console.log('template should have updated');
  });
},

Note that you need to listen on the element's shadowRoot and not the element itself as apparently change events don't pierce shadow boundaries . I didn't notice at first but it is stated in the docs that it's only for listening changes in the light dom .