聚合物1.0隐藏$ =“{{show}}”不起作用

Question

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

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

任何想法？

<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="..." 或
• 添加/删除一个隐藏的类和CSS规则.hidden { display: none; }（这也适用于IE9不承认hidden属性。