Question

我似乎错放了几十个智商点......

我试图从主持人的纸张下拉菜单中捕捉铁项目改变的事件。对于我的生活，我无法弄清楚（或找到一个例子）语法。

<paper-listbox .... onclick="doSomething()">

工作正常。但是oniron-items-changed并没有改变。铁上物品也没有改变。也不是onIronItemsChanged。或者我能想到的事件名称的任何其他变体。

无论如何，有人可以帮忙吗？请？？？

更新：我开始认为问题在于它是一个事件冒泡问题。我尝试将属性向上移动到纸张下拉菜单元素，但这没有帮助。有任何想法吗？这是传送到浏览器的HTML：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link href="/Content/site.css" rel="stylesheet"/>

    <link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
    <link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
    <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/paper-item/paper-item.html">
    <link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
    <link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">

    <style>
       #pageContent {
           margin: 20px;
       }
    </style>
</head> 

<body unresolved>
    <app-header-layout>
        <app-header slot="header" fixed condenses shadow effects="waterfall">
            <app-toolbar>
                <div main-title>FTI Calculation Editor</div>
            </app-toolbar>
        </app-header>
        <div id="pageContent">
          <paper-dropdown-menu label="Master" id="master" on-selected-item-changed="doSomething" >
              <paper-listbox slot="dropdown-content" >
                      <paper-item>Test One</paper-item>
                      <paper-item>Test Three</paper-item>
                      <paper-item>Test Two</paper-item>
              </paper-listbox>
          </paper-dropdown-menu>

          <p></p>

          <paper-dropdown-menu label="Child" id="child">
              <paper-listbox slot="dropdown-content">
                      <paper-item>C 1-1</paper-item>
                      <paper-item>C 1-2</paper-item>
                      <paper-item>C 1-3</paper-item>
                      <paper-item>C 2</paper-item>
                      <paper-item>C 3-1</paper-item>
                      <paper-item>C 3-3</paper-item>
                      <paper-item>C 3-4</paper-item>
                      <paper-item>C-3-2</paper-item>
              </paper-listbox>
          </paper-dropdown-menu>
        </div>
    </app-header-layout>

    <script>
        function doSomething(e) {
            alert("got here");
        }
    </script>

</body>
</html>

＆＃13;

可能很明显，但我最终想要实现的是根据第一个选择过滤第二个下拉列表。如果有人知道更好/更容易实现这一目标，我很高兴知道......

Answer 1

只需查看文档。它指出了一条好路。正如您在documentation中看到的那样，-on-iron-items-changed因此问题必定存在于其他地方。

您最后无法使用()调用函数。你需要指向某个功能而不是实际调用它。所以将代码重写为：

<paper-listbox .... on-iron-items-changed="doSomething">

Answer 2

使用onclick="domsomething()"获取事件的方式可以解决问题，因为您没有使用实际的Polymer语法，这是用于捕获点击的“旧”HTML方法。但是你可能不希望这样，至少因为它在触控设备支持方面不是最好的（而且还有很多用途）。

但在你的情况下，现在，另一个答案非常接近。首先，您不需要调用函数，您需要传递一个可以被paper-listbox元素用作回调的名称。

唯一的区别是您对项目更改时触发的事件不感兴趣。这将是列表更改时的情况。我猜你对所选择的事件发生变化时触发的事件感兴趣。因此，在该页面上，您可以看到有一个名为selected-item-changed的事件。这意味着您可以使用on-selected-item-changed属性来定义该事件的回调。

所以请尝试：

<paper-listbox .... on-iron-items-changed="doSomething">

您doSomething方法将获得一个参数，即事件对象。

Polymer 2.0 paper-listbox选中的事件

2 个答案: