聚合物 1.0 隐藏 $="{{show}}" 不工作

Question

我正在尝试创建一个可切换菜单，但由于某种原因隐藏属性不起作用。它对任何一个值都不起作用，所以我认为这不是数据绑定问题。

我在我的项目的其他部分和其他 javascript 自由和框架中使用这种方法，它永远不会变得更复杂，所以我看不出我做错了什么。

有什么想法吗？

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">


<dom-module id="user-account-menu">

    <template>

        <style>
            img {
                width: 72px;
                height: 72px;
            }
            paper-menu {
                position: absolute;
                right: 15px;
                width: 200px;
                background: #A3A3A3;
            }
        </style>


        <firebase-auth
            id="auth"
            signed-in="{{signedIn}}"
            user="{{user}}">
        </firebase-auth>


        <!-- start the account dropdon -->
        <div>
            <img src="{{computePhotoURL()}}">

            <paper-menu hidden$="{{show}}">
              <paper-item>This is a menu item</paper-item>
              <paper-item>[[show]]</paper-item>
            </paper-menu>
        </div>

    </template>

    <script>
        Polymer({
            is: 'user-account-menu',

            properties: {
                show: {
                    type: Boolean,
                    value: true
                }
            },

            computePhotoURL: function() {
                // get the users photo, if one doesn't exist, 
                // get the default user avatar
                var photo;

                try {
                    photo = this.user.photoURL;
                    return photo;
                } catch(err) {
                    return 'https://developers.google.com/experts/img/user/user-default.png';
                }
            },
        });
    </script>

</dom-module>

更新（dom 的纸质菜单css）：

element.style {
}
<style>…</style>
paper-menu {
    position: absolute;
    right: 15px;
    width: 200px;
    background: #A3A3A3;
}
<style>…</style>
:host {
    display: block;
    padding: 8px 0;
    background: #ffffff;
    color: #212121;

Answer 1

paper-menu 组件的 display: block 设置破坏了 hidden 功能。

使用 hidden 属性无论如何都被认为是不好的做法，因为这个问题正是您运行所关注的。它与 display 设置冲突。

我建议使用

<template dom-if="..." 或
add/remove 一个隐藏的 class 和一个 CSS 规则 .hidden { display: none; }（这也适用于无法识别 hidden 属性的 IE9。

Answer 2

尝试从 hidden?="{{show}}"

中删除 ?

Answer 3

另一种选择是将其添加到您的样式中：

<style>
  [hidden] {
    display: none !important;
  }
</style>

聚合物 1.0 隐藏 $="{{show}}" 不工作

Polymer 1.0 hidden$="{{show}}" not working

polymer-1.0