父级

Question

我在另一个<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，你必须写＆＃34; on - ＆＃34;然后是手势事件类型。您还必须删除事件处理程序中的括号。在你的情况下：

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