Polymer 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

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

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

Answer 2

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

hidden无论如何,使用该属性被认为是不好的做法,因为您遇到了这个问题.它与display设置冲突.

我建议使用

• <template dom-if="..." 要么
• 添加/删除隐藏的类和CSS规则.hidden { display: none; }(这也适用于无法识别hidden属性的IE9 .