聚合物数据绑定更改侦听器？

Question

我有这个自动绑定模板：

<template class="event-listener" is="dom-bind">
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <section data-route="one">
        </section>
        <section data-route="two"></section>
      </iron-pages>
</template>

我可以在javascript中设置route的值，例如：

var app = document.querySelector(".event-listener");
app.route = "one";

当route的值发生变化时，如何添加监听器？

Answer 1

添加侦听器来检测route的更改几乎肯定意味着您应该创建一个常规的聚合物元素，而不是使用dom-bind-style元素。

作为示例，您可以改为将以下内容广告到head

<dom-module is='my-el'>
<script>
Polymer({
    is: 'my-el',
    properties: {
        route: {
            type: String,
            observer: 'routeChanged'
        }
    },
    routeChanged: function() {
        // change fires here
    }
});
</script>
<template>
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <section data-route="one">
        </section>
        <section data-route="two"></section>
      </iron-pages>
</template>
</dom-module>

在body中的某个地方

<my-el></my-el>
<script>
document.querySelector('my-el').route = "one";
</script>