我正在使用 Polymer，我很困惑什么时候应该使用什么类型的绑定(bind)。比如说我有以下代码:
<body unresolved touch-action="auto">
<my-app></my-app>
<polymer-element name="my-app">
<template>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>My Site</span>
</core-toolbar>
<core-menu selected="0" selectedItem="{{selectedMenu}}">
<paper-item icon="home" label="One"></paper-item>
<paper-item icon="today" label="Two"></paper-item>
</core-menu>
</core-header-panel>
<core-header-panel main mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back"></paper-icon-button>
<span flex>{{selectedMenu.label}}</span>
</core-toolbar>
<div class="content">
Content goes here!
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('my-app', function(){
});
</script>
</polymer-element>
</body>
在过去，我没有在 polymer-element 中有这段代码，而是直接在代码中。然后我可以做类似的事情:
var navicon = document.getElementById('navicon');
var back = document.getElementById('back');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function(){
drawerPanel.togglePanel();
});
back.addEventListener('click', function(){
window.history.back();
});
但是，我不知道如何在 polymer-element 中执行此操作。
此外，我过去常常使用 document.addEventListener('polymer-ready', function(){ ... }); 来确保元素在初始化之前已加载。我该如何正确地完成这一切？
最佳答案
您只需要将旧的 js 放在 polymer elements 脚本标签中即可。 ready 函数在设置元素时调用。
Polymer() 的第二个参数需要是一个对象，而不是一个函数。
<script>
Polymer('my-app', {
ready: function () {
var navicon = this.$.navicon;
var back = this.$.back;
var drawerPanel = this.$.drawerPanel;
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
back.addEventListener('click', function() {
window.history.back();
});
}
});
</script>
有关更多信息，请阅读很棒的 polymer docs .
关于javascript - Polymer 添加事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24850113/