CODEWITHSUNDEEP
data-bindingpolymerpolymer-1.0
Tom
Tom

Reputation: 929

How can I open a drawer in a template from a parent template in a Polymer code?

I am cutting my project into several templates. I have a drawer (<app-drawer> from the app-layout package), and I decided to make a template out of it. I would like to open or toggle the drawer with a button in the main template. I tried to use data binding for that, but the drawer doesn't appear.

Here is the minimal code of the main window:

<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<link rel="import" href="test-drawer.html">

<dom-module id="test-window">
  <template>
    <app-header reveals>
      <app-toolbar>
        <paper-button on-tap="togglemenu">Test</paper-button>
      </app-toolbar>
    </app-header>
    <test-drawer drawerOpened="{{drawerOpened}}"></test-drawer>

  </template>

  <script>
    Polymer({
      is: "test-window",

      togglemenu: function() {
        alert('test')
        this.drawerOpened = !this.drawerOpened;
      },
    })
  </script>
</dom-module>

Here is the minimal code of the drawer:

<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">

<dom-module id="test-drawer">
  <template>
    <app-drawer id="drawermenu" opened="{{drawerOpened}}" swipe-open>
       <paper-menu selected="{{menuSelected}}" attr-for-selected="name">
         <paper-item name="item1">Item1</paper-item>
         <paper-item name="item2">Item2</paper-item>
         <paper-item name="item3">Item3</paper-item>
       </paper-menu>
     </app-drawer>
    </template>

  <script>
    Polymer({
      is: "test-drawer",

      properties: {
        drawerOpened: Boolean,
      },
    })
  </script>
</dom-module>

I know the callback runs because the alert box shows up.

What am I doing wrong here?

Upvotes: 2

Views: 82

Answers (1)

tony19
tony19

Reputation: 138696

Your property is named drawerOpened, which is mapped to dash-case (i.e., drawer-opened) for data binding, so change this:

<test-drawer drawerOpened="{{drawerOpened}}"></test-drawer>

to:

<test-drawer drawer-opened="{{drawerOpened}}"></test-drawer>


HTMLImports.whenReady(() => {
  Polymer({
    is: 'test-drawer',
    properties: {
      drawerOpened: {
        type: Boolean,
        notify: true
      }
    }
  });
  
  Polymer({
    is: 'test-window',

    togglemenu: function() {
      this.drawerOpened = !this.drawerOpened;
    },
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="app-layout/app-layout.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <test-window></test-window>
  
  <dom-module id="test-drawer">
    <template>
      <app-drawer id="drawermenu" opened="{{drawerOpened}}" swipe-open>
        <paper-menu selected="{{menuSelected}}" attr-for-selected="name">
          <paper-item name="item1">Item1</paper-item>
          <paper-item name="item2">Item2</paper-item>
          <paper-item name="item3">Item3</paper-item>
        </paper-menu>
      </app-drawer>
    </template>
  </dom-module>
  
  <dom-module id="test-window">
    <template>
      <style>
        app-header {
          background: #47cf73;
        }
      </style>
      <app-header reveals>
        <app-toolbar>
          <paper-button on-tap="togglemenu">Test</paper-button>
        </app-toolbar>
      </app-header>
      <test-drawer drawer-opened="{{drawerOpened}}"></test-drawer>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 1

Related Questions