Question

    <template is="auto-binding">
        <core-drawer-panel drawerWidth="180px" rightDrawer forceNarrow selected="{{panelSelected}}">
        </core-drawer-panel>
    </template>

    <script>
        var t = document.querySelector('template');
        t.panelSelectedChanged=function(){
         console.log('panelSelectedChange', this.panelSelected)
        }
    </script>

有没有办法在自动装订中使用...更改功能？我不能将它包装在聚合物元素中，因为它会破坏它周围的其他js框架。

编辑：我从杰夫那里得到的答案很完美，但也想指出它有一些非直观的行为

        t.addEventListener('template-bound', function() {
            document.querySelector('core-drawer-panel').addEventListener('core-select', function(e) {
                console.log('Selection changed:', e.detail.isSelected)
                console.log('Selection changed:', e.target.selected)
            })
        })

打开抽屉

Selection changed: false 
Selection changed: drawer 
Selection changed: true 
Selection changed: drawer

关闭抽屉

Selection changed: false
Selection changed: main
Selection changed: true 
Selection changed: main

Answer 1

我自己没有尝试过，因为我没有一个可以说明<core-drawer-panel>使用情况的工作示例，但我可以看到<core-drawer-panel> includes保持<core-selector>状态的selected元素。

根据<core-selector>的文档，只要选择状态发生变化，就会触发core-select event。

因此，您应该能够听取该事件，并根据具体情况确定何时发生变化，如（未经测试）：

  document.querySelector('template').addEventListener('template-bound', function() {
    document.querySelector('core-drawer-panel').addEventListener('core-select', function(e) {
      console.log('Selection changed:', e.detail);
    });
  });

或者，您始终可以使用observe-js（作为Polymer库的一部分引入）来检测任意变量何时在Polymer元素之外发生变化。您可以使用PathObserver观察示例中对{ t: 'panelSelected' }的更改。

我认为在这种特殊情况下，尽可能听取事件的方法更为清晰，但观察者方法是解决问题的更通用方法，并且与您panelSelectedChanged处理程序直接相关。进入Polymer元素。

panelSelectedChanged的自动绑定

1 个答案: