如何从 Polymer 代码中的父模板打开模板中的抽屉？

Question

我正在将我的项目切割成几个模板。我有一个抽屉（来自 app-layout 包的 <app-drawer>），我决定用它制作一个模板。我想用主模板中的按钮打开或切换抽屉。我尝试为此使用数据绑定，但抽屉没有出现。

这里是主要的最小代码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>

抽屉的最小代码如下：

<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>

我知道回调运行是因为出现了警告框。

我做错了什么？

Answer 1

你的属性被命名为drawerOpened，也就是mapped to dash-case（即drawer-opened）用于数据绑定，所以改成：

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

至：

<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

如何从 Polymer 代码中的父模板打开模板中的抽屉？

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

data-binding

polymer

polymer-1.0