文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物2.0纸张-列表框选定事件

问聚合物2.0纸张-列表框选定事件
EN

Stack Overflow用户

提问于 2017-10-25 01:45:02

回答 2查看 2.1K关注 0票数 0

我好像把几十个IQ点放错地方了……

我正在尝试从主机的纸张下拉菜单中捕获一个iron-items-changed事件。我怎么也搞不懂(或找不到一个例子)这种语法。

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

工作正常。但oniron-items-changed没有，on-iron-items-changed也没有。也不是onIronItemsChanged。或者我能想到的事件名称的任何其他变体。

不管怎样，有人能帮上忙吗？请不要这样？

更新:我开始认为问题是这是一个事件冒泡问题。我尝试将属性向上移动到paper-dropdown-menu元素，但没有帮助。有什么想法吗？下面是传递给浏览器的HTML：

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

可能很明显，但我最终要实现的是根据第一个下拉列表中的选择来过滤第二个下拉列表。如果有人知道实现这一目标的更好/更简单的方法，我将很高兴知道……

polymer

回答 2

Stack Overflow用户

发布于 2017-10-25 01:49:11

只需查看文档即可。它为你指明了一条好的道路。正如您在documentation中看到的，存在-on-iron-items-changed，所以问题一定出在其他地方。

你不能在最后用()调用函数。您需要指向某个函数，而不是实际调用它。因此，请将代码重写为：

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

票数 0

Stack Overflow用户

发布于 2017-10-25 13:08:20

你用onclick="domsomething()"获取事件的方式做了一些事情，因为你没有使用实际的聚合物语法，这是“旧”的超文本标记语言的方式来捕捉点击。但你可能不想这样，至少因为它在触控设备支持方面不是最好的(有on-tap for tat)。

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

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

因此，请尝试：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46916894

复制

相似问题

问聚合物2.0纸张-列表框选定事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物2.0纸张-列表框选定事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物2.0纸张-列表框选定事件
EN