javascript - 高分子纸折叠项目改变父类

Question

我有一个 polymer <paper-collapse-item>里面 <div>在另一个里面<div> 。当 <paper-collapse-item>打开后，我想更改添加另一个类到 <div class="container"> 。但 Polymer 告诉我该函数未定义。现在我有:

HTML:

<div class="container> 
    <h1>Header</h1>
    <div class="box" onclick="[[_expandBox()]]">
        <paper-collapse-item class="header" header="">
            <p class="longText">Some long text</p>
        </paper-collapse-item>
    </div>
</div>

脚本:

<script>
    Polymer({
      is: 'text-page',

      _expandBox: function() {
        var exp = this.getElementsByClassName("header")[0];
        var expPar = this.getElementsByClassName("box")[0].parentNode;
        if (exp.hasAttribute(opened)) {
          expPar.className += " paropen";
        }
      }
    });
</script>

那么我怎样才能正确调用该函数并使其向容器添加一个类呢？

编辑

由于不同的原因，我对整个设置进行了一些更改。仍然存在这个问题。

HTML:

<div class="container> 
    <h1>Header</h1>
    <collapse-item opened="{{opened}}" on-tap="_expandBox(opened)"></collapse-item>
</div>

脚本:

<script>
    Polymer({
      is: 'text-page',

      _expandBox: function(opened) {
        var exp = this.getElementsByClassName("container")[0];
        if (opened) {
          exp.className += " paropen";
        }
      }
    });
</script>

这告诉我:监听器方法 _expandBox(opened)未定义

谢谢你帮助我学习。我是 Polymer 新手。

Answer 1

已关注 Polymer Documentation ，您必须写“on-”，然后写手势事件类型。您还必须删除事件处理程序中的括号。对于您的情况:

<div class="box" on-click="_expandBox">

编辑:

在 on-tap 事件声明中，您必须添加一个监听器，在本例中是 on-tap="_expandBox" (不带参数)。当事件 tap 发生时，事件对象将作为第一个参数自动传递给函数:

_expandBox: function(event) {
    console.log(event.detail);
}

您的代码可能是:

HTML:

<div class="container> 
    <h1>Header</h1>
    <collapse-item id="collapseItem" on-tap="_expandBox" opened="[[_functionWithParamsThatChangesThis(param1, param2, ...)]]"></collapse-item>
</div>

脚本:

<script>
    Polymer({
      is: 'text-page',

      _expandBox: function() {
        var exp = this.getElementsByClassName("container")[0];
        if (this.$.collapseItem.opened) {
          exp.className += " paropen";
        }
      }

      _functionWithParamsThatChangesThis(param1, param2, ...) {
        if (param1, param2, ...) return true;
        return false;
      }
    });
</script>