So i made a custom-menu with iron-selector and put it inside on another custom element wich contains iron-pages and i can't bind the buttons of my menu with the content of the pages. Basically a Switcheroo with custom elements. Here is some code (simplified):
my-menu
<dom-module id="my-menu">
<style>
:host {display: inline-block; }
</style>
<template>
<iron-selector id="menu" selected="{{menuSelected}}" attr-for-selected="name-menu">
<div name-menu="portfolio" class="button"></div>
<div name-menu="about" class="button"></div>
<div name-menu="contact" class="button"></div>
</iron-selector>
</template>
<script>
Polymer({
is: 'my-menu',
behaviors: [Polymer.IronSelectableBehavior],
poperties:{
menuSelected:{
type: String,
value: 'portfolio'
}
}
});
</script>
</dom-module>
and my-pages
<dom-module id="my-pages">
<style>
:host {display: inline-block;}
</style>
<template>
<my-menu menu-selected="{{pageSelected}}"></my-menu>
<iron-pages attr-for-selected="page" selected="{{pageSelected}}">
<section page="portfolio"> Some Content </section>
<section page="about"> Some Content </section>
<section page="contact"> Some Content </section>
</iron-pages>
</template>
<script>
Polymer({
is: 'my-pages',
});
</script>
</dom-module>
Thanks for reading this! =)
You need to add 'notify: true' to menuSelected. So that my-pages knows when my-menu modifies the value of menuSelected. Also as others mentioned, you need to fix the spelling of properties. Change it as below:
You can get rid of the
Polymer.IronSelectableBehavior
behaviour because it is a dependency loaded byiron-selector
already.You've also spelt
properties
incorrectly in themy-menu
element: 'poperties'...