如何从聚合物代码中的父模板中打开模板中的抽屉

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

这是主窗口的最小代码：

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

我知道该回调是因为出现了警报框。

我在这里做错了什么？

您的属性被命名为 drawerOpened，该属性映射到dash-case（即drawer-opened）进行数据绑定，因此请更改以下内容：

<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

相关内容

最新更新

热门标签：