纸下拉菜单在发光元素中不起作用 [英] paper-dropdown-menu not working in a lit-element

问题描述

编辑:事实证明，如果在将 paper-listbox 用于另一个元素之前导入它会有所帮助.出于某种原因，我认为它是作为对我正在导入的另一个元素的依赖项导入的，但没有.一旦我添加了显式导入，它就开始正常工作.原始问题如下.

Edit: Turns out, it helps if you import paper-listbox before using it in another element. For some reason I thought it was being imported as a dependency on another element I was importing, but no. As soon as I added the explicit import, it began working correctly. Original question follows.

首先，这个问题只会在 lit-element 中使用 paper-dropdown-menu(里面有 paper-listbox)时发生.我们在多个 PolymerElement(s) 中以几乎完全相同的方式使用该组件，没有出现任何问题.

To start, this problem only happens when using paper-dropdown-menu (with paper-listbox inside) in a lit-element. We're using the component in almost the exact same way in multiple PolymerElement(s) with no issues.

基本上，我发现 paper-dropdown-menu 有两个问题.第一个是它从不显示任何类型的值，无论是 label 属性还是实际选择的值，它的 value 属性也不会改变，即使 >paper-listbox 里面有一个设定值.第二个问题是似乎不可能从下拉菜单中选择任何值 - 您可以单击它们，但列表不会关闭，并且所选选项名称不会显示在菜单的文本显示中.

Basically, I'm seeing two issues with paper-dropdown-menu. The first is that it never displays a value of any type, whether the label attribute or an actual selected value, nor does its value property ever change, even when the paper-listbox inside has a set value. The second problem is that it appears to be impossible to select any value from the dropdown menu - you can click on them, but the list doesn't close, and the selected option name doesn't show up in the menu's text display.

由于问题的性质，问题似乎在于其中的 paper-dropdown-menu 和 paper-listbox 不是正确地沟通……但如果我能找出原因，我会被诅咒的.

Due to the nature of the issues, it appears as though the problem is that the paper-dropdown-menu and the paper-listbox inside of it aren't communicating properly... but I'll be damned if I can figure out why.

这是来自元素的 render 方法的相关标记:

Here's the markup in question from the element's render method:

<paper-dropdown-menu id="homepageSelect">
    <paper-listbox slot="dropdown-content" 
        attr-for-selected="item-value" 
        selected="${state.homepage}"
        label="Select a homepage"
        @selected-changed="_homepageChanged">

        ${state.homepageOptions.map(o => html`
            <paper-item item-value="${o.value}">${o.name}</paper-item>
        `)}

    </paper-listbox>
</paper-dropdown-menu> 

以及我们使用的模拟数据:

And the mock data we're using:

{
    "title": "Boss of you",
    "fullName": "J Jonah Jameson",
    "username": "jjj",
    "client": "Daily Bugle",
    "homepage": "http://sampledomain.com/",
    "homepageOptions": [{
        "name": "FrontPage",
        "value": "http://sampledomain.com/"
    }, {
        "name": "Editorials",
        "value": "http://sampledomain.com/opinion"
    }, {
        "name": "Metro",
        "value": "http://sampledomain.com/metro"
    }],
    "groups": [{
        "name": "Admin",
        "description": "Administers the whole shebang"
    }, {
        "name": "Power users",
        "description": "Like regular users, but powerful"
    }, {
        "name": "Gen pop",
        "description": "Down in the weeds"
    }],
    "changePasswordUrl": "https://change.password.now",
    "email": "[e-mail]",
    "phoneWork": "404-555-1234",
    "phoneCell": "404-555-4321",
    "phoneHome": "404-123-5555",
    "address": {
        "address1": "1234 Boulevard St",
        "address2": "Ste 1",
        "city": "Atlanta",
        "state": "GA",
        "zip": "30303",
        "country": "USA",
        "type": "Office"
    }
}

我会放一张它的外观截图，但想象一下没有选择任何内容的下拉菜单，你就知道了.单击它实际上确实显示了内部 paper-listbox，但该列表不会在单击时关闭，也不会将被单击的值添加到 paper-dropdown-menu元素.

I'd put up a screenshot of how it looks, but just imagine a dropdown with nothing selected, and you've got it. Clicking it actually does display the internal paper-listbox, but the list does not close on click, nor does the clicked value ever make it up to the paper-dropdown-menu element.

有人知道这是怎么回事吗?从理论上讲，PolymerElement 应该能够在任何形式的 HTML 标记中运行——事实上它在一个 lit-element 中应该没有区别，并且不会t 对于我们正在使用的每个其他组件.尽管如此，使用这种模式的这个组件在 PolymerElement 中工作，但在这里不起作用，我不明白为什么.

Anyone have any idea what's going on? Theoretically, a PolymerElement should be able to run inside of any form of HTML markup - the fact that it's within a lit-element shouldn't make a difference, and doesn't for every other component we're using. Nevertheless, this component, using this pattern, works in PolymerElement but does not work here, and I don't understand why.

推荐答案

它从不显示任何类型的值，无论是 label 属性还是实际选定的值，它的 value 属性也不会改变，即使 paper-listbox 里面有一个设定值

It never displays a value of any type, whether the label attribute or an actual selected value, nor does its value property ever change, even when the paper-listbox inside has a set value

在模板内部，您引用了 state.如果 state 是元素的一个属性，那么你必须用 this. 引用它(除非它是你在 render() 函数你没有粘贴在这里).这可能是缺失值的原因.

Inside of the template you're referencing state. If state is a property of the element then you have to reference it with this. (unless it's a variable you defined in the part of the render() function you didn't paste here). This may be the cause of the missing values.

缺少标签是因为您将 label 属性放在 中，而它应该放在 中..

The missing label is because you put the label attribute in <paper-listbox> while it should be in <paper-dropdown-menu>.

似乎无法从下拉菜单中选择任何值 - 您可以单击它们，但列表不会关闭，并且所选选项名称不会显示在菜单的文本显示中.

It appears to be impossible to select any value from the dropdown menu - you can click on them, but the list doesn't close, and the selected option name doesn't show up in the menu's text display.

未显示的名称应与上一点相同.我在本地尝试了您的示例，但由于动画错误，该列表实际上并未关闭.发生这种情况是因为下拉菜单使用了一些必须填充的 Web Animations API 功能:

The name not showing up should be the same as the previous point. I tried your example locally and the list actually doesn't close because of an error with the animations. This happens because the dropdown uses some Web Animations API features that have to be polyfilled:

$ npm install web-animations-js

<script src="node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

此外，您将字符串传递给 @selected-changed (à la Polymer)，而您应该使用插值:

Also, you're passing a string to @selected-changed (à la Polymer) while you should use interpolation:

@selected-change=${e => this. _homepageChanged(e)}

or

@selected-change=${this. _homepageChanged.bind(this)}

这样似乎一切正常:

这篇关于纸下拉菜单在发光元素中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！