I'm using Polymer and I'm rather confused as to when I should use what type of binding. Say for example I have the following code:
<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>
In the past, I didn't have this code in a polymer-element, but instead just directly in the code. Then I could do stuff like:
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();
});
However, I have no idea how I should do this inside the polymer-element.
Also, I used to use document.addEventListener('polymer-ready', function(){ ... }); to be sure that the elements were loaded before initializing them. How do I do this all correctly?
I'm using Polymer and I'm rather confused as to when I should use what type of binding. Say for example I have the following code:
<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>
In the past, I didn't have this code in a polymer-element, but instead just directly in the code. Then I could do stuff like:
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();
});
However, I have no idea how I should do this inside the polymer-element.
Also, I used to use document.addEventListener('polymer-ready', function(){ ... }); to be sure that the elements were loaded before initializing them. How do I do this all correctly?
2 Answers
Reset to default 4You just need to put your old js in the polymer elements script tag. The ready function is called when the element is set up.
The second argument of Polymer() needs to be an object, not a function.
<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>
For more information read the awesome polymer docs.
And to simplify things a little bit more, you could use declarative event mapping:
<paper-icon-button icon="menu" on-tap="{{nav}}"></paper-icon-button>
<paper-icon-button icon="arrow-back" on-tap="{{back}}"></paper-icon-button>
then define some function properties in your element
Polymer('my-app', {
nav: function() {
this.$.drawerPanel.togglePanel();
},
back: function() {
window.history.back();
}
});