Question

我尝试制作与paper-drawer-panel类似的内容但没有原始组件中的主要部分。我的自定义抽屉工作正常，我只是想添加一些功能来完成功能。切换功能有效，但打开抽屉后我想向主体添加点击和滚动处理程序，所以如果没有再次按下菜单按钮或者没有点击抽屉内的元素，可以用主体上的点击或滚动处理程序关闭它。从点击处理程序开始但是当它添加到open函数时，我得到了我的函数未定义的引用错误。我不确定我的代码在哪里出错，因为openDrawer / closeDrawer函数有效，所以我不明白为什么clickOnBody函数不起作用。

＆＃13;

<link rel="import" href="../polymer/polymer.html">

<dom-module id="mdl-drawer-panel">
	<template>

		<div id="mdlDrawer">
			<content id="mdlDrawerContent" select="[mdlDrawer]"></content>
		</div>
	</template>

  <script>
    (function(){
      var drawerElement = $('mdl-drawer-panel');
      var bodyElement = $('body');
      var isClosed = 'true';
      Polymer({
        is: 'mdl-drawer-panel',
        properties: {

        },

        togglePanel: function() {
          if (isClosed) {
            this.openDrawer();
          } else {
            this.closeDrawer();
          }
          isClosed = !isClosed;
        },

        openDrawer: function() {
          drawerElement.removeClass('transClose');
          drawerElement.addClass('transOpen');
          bodyElement.bind('click', clickOnBody); // Add click listener
          console.log('is drawer opened ? ( ' +isClosed+ ' )');
        },

        closeDrawer: function() {
          drawerElement.removeClass('transOpen');
          drawerElement.addClass('transClose');
          bodyElement.unbind('click', clickOnBody); // Remove click listener
          console.log('is drawer opened ? ( ' +isClosed+ ' )');
        },

        clickOnBody: function(){
          bodyElement.togglePanel();
          console.log('clicked');
        }
      });
    }());
  </script>
</dom-module>

＆＃13;

更新！ 添加＆＃39; 此＆＃39;到bodyElement.bind（＆＃39;点击＆＃39;，this.clickOnBody）;它抛出另一个错误 - togglePanel（）不是一个函数。但为什么呢？

Answer 1

您的代码中发生了一些奇怪的事情：）

为什么选择器位于脚本的顶部？顺便问一下jQuery吗？
我认为您的意思是将isClosed声明为property。
togglePanel不是<body>的函数。这就是您收到错误的原因
您应该使用DOM API来操作Polymer

你绝对应该分离关注点。我对您的代码进行了一些更改。请参阅下面的代码段。

＆＃13;

Polymer({
  is: 'mdl-drawer-panel',
  properties: {
    isClosed: {
      value: true
    }
  },

  togglePanel: function() {
    if (this.isClosed) {
      this.openDrawer();
    } else {
      this.closeDrawer();
    }
    this.isClosed = !this.isClosed;
  },

  openDrawer: function() {
    Polymer.dom(this).classList.remove('transClose');
    Polymer.dom(this).classList.add('transOpen');
    
    console.log('is drawer opened ? ( ' +this.isClosed+ ' )');
  },

  closeDrawer: function() {
    Polymer.dom(this).classList.remove('transOpen');
    Polymer.dom(this).classList.add('transClose');
    
    console.log('is drawer opened ? ( ' +this.isClosed+ ' )');
  }  
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body style="height: 200px">
  <mdl-drawer-panel></mdl-drawer-panel>
  
  <dom-module id="mdl-drawer-panel">
      <template>
          <div id="mdlDrawer">
              <content id="mdlDrawerContent" select="[mdlDrawer]"></content>
          </div>
      </template>
  </dom-module>
  
  <script>
    var bodyElement = document.querySelector('body');
    var drawerElement = document.querySelector('mdl-drawer-panel');
    
    bodyElement.addEventListener('click', clickOnBody);
    
    function clickOnBody(){
      drawerElement.togglePanel();
      console.log('clicked');
    }
  </script>

</body>
</html>

＆＃13;

看到我将一些代码移动到HTML正文中的脚本。另外，我鼓励您尽可能使用原生JS。

从聚合物元素不起作用的身体绑定功能

1 个答案: