Question

我有一个模板：

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

然后我异步加载数据，如：

    // ...
    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));
}

但到达draw时，this.$['sheep'+i]尚未创建。

我是否可以使用回调来检测模板绑定后何时插入DOM元素？

[编辑] 使用this

时，必须使用模板元素作为模型而不是auto-binding元素实例

[编辑] 经过更多研究后发现template-bound事件仅在创建模板时触发一次，而在更新时则不触发。加载数据后，更新模型，然后同步调用绘图函数。我怀疑模型在模型观察到更改时异步更新，使得this.$.container.$['sheep'+i]在绘制函数执行时不可用。在模板完成节点更新后，我需要以异步方式运行draw函数。

[编辑] 请参阅jsfiddle，其中包含测试代码

Answer 1

发现它！耶！
您可以使用Polymer的助手onMutation函数（或者可能是vanilla MutationObserver）

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

请注意，您需要监听元素的shadowRoot而不是元素本身，因为它显然是change events don't pierce shadow boundaries。起初我没有注意到，it is stated in the docs只是在light dom听取更改。

模板数据绑定的聚合回调

1 个答案: