First, I'm loving Polymer. I'm not proficient in javascript, and I don't fully understand all the shadow-DOM stuff that's going on. But I take it that Polymer is under development for people like me (non-full-time coders who need to build websites quickly and programmatically by plugging simple pieces together). It's lots of fun, and once I understand how something in it works, it's really lovely.
My latest attempt to build a site / app involves a lot of menu and submenu items connected to core-pages. I love the idea that I can just connect a menu item id with a div id inside core-pages and have that work. And when I do it with just menu items and hand-coded ids, it works perfectly. But when I add in core-submenu and template repeat generated items and pages with matching ids, for some reason that is probably obvious to others, it doesn't.
My question: Does submenu/pages require scripting, or am I doing something wrong with my polymer tags? If scripting is required, I'd love some pointers to resources for beginners. I've had a look at the spa.html demo, but it doesn't include submenus. Any tips?
Right now, the core of my code looks like this: http://jsbin.com/xuzezelumeje/1/edit
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/core-scaffold/core-scaffold.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
<polymer-element name="my-app">
<template>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar></core-toolbar>
<core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme">
<template repeat="{{item in items}}">
<core-submenu icon="visibility" label="{{item.year}}">
<template repeat="{{office in item.offices}}">
<core-item id="{{office}} {{item.year}}" label="{{office}}"></core-item>
</template>
</core-submenu>
</template>
</core-menu>
</core-header-panel>
<div tool>DC Campaign Finance Watch</div>
<core-pages selected="{{selected}}" valueattr="id">
<template repeat="{{item in items}}">
<template repeat="{{office in item.offices}}">
<div id="{{office}} {{item.year}}">{{item.year}} {{office}}</div>
</template>
</template>
</core-pages>
</template>
<script>
Polymer({
ready: function() {
this.items = [
{
"offices": [
"Mayor",
"Council Chairman",
"Council At-Large",
"etc"
],
"year": "2014"
},
{
"offices": [
"Council At-Large"
],
"year": "2013"
},
{
"offices": [
"Council Chairman",
"Council At-Large",
"etc"
],
"year": "2012"
},
{
"offices": [
"Council At-Large",
"School Board Ward 4",
"School Board Ward 8"
],
"year": "2011"
},
{
"offices": [
"Mayor",
"Council Chairman",
"etc"
],
"year": "2010"
}
];
}
});
</script>
</polymer-element>
<my-app></my-app>
