Polymer core-scaffold change tool using data binding

Question

I'm using Polymer on my website, more specifically the Core-Scaffold.

Here's some sample code I made:

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">
    <core-toolbar>Application</core-toolbar>
    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>
  </core-header-panel>
  <div tool>Title</div>
  <div>Content goes here...</div>
</core-scaffold>
<script>
  var menuItems = document.querySelector("core-menu");

  menuItems.addEventListener("core-select", function(){
    console.log(menuItems.selected);
  });
</script>

What I want is that on clicking one of the core-item's from the core-menu, that the <div tool>Title</div> content changes correspondingly. I've already been able to attach an event listener to the selection of the buttons, but I dont quite know how to keep the tool up to date. Polymer has a two-way data binding that I don't fully master yet.

So, what would be the most advised way of updating the tool-div with the pressed menu-item-label?

Peter Burns Peter Burns · Accepted Answer · 2014-07-18T22:39:03

You can accomplish this easily with two way data binding. <core-menu> exposes a selectedItem attribute which you can bind on. To get data binding you can set up a bound template manually, but you probably just want to make your app itself a component. Like so:

<my-app></my-app>

<polymer-element name='my-app'>
  <template>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">
        <core-toolbar>Application</core-toolbar>
        <core-menu theme="core-light-theme" selectedItem='{{item}}'>
          <core-item icon="settings" label="item1"></core-item>
          <core-item icon="settings" label="item2"></core-item>
        </core-menu>
      </core-header-panel>
      <div tool>{{item.label}}</div>
      <div>Content goes here...</div>
    </core-scaffold>
  </template>
  <script>
    Polymer('my-app', {
    });
  </script>
</polymer-element>

Polymer core-scaffold change tool using data binding

1 Answers