聚合物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屬性。