聚合物1.0 dom-if在以前爲真時不重新計算

Question

我有以下組件顯示基於媒體查詢的特定圖像。我期望看到的是窗口大小的調整，不同的圖像將被加載和顯示，以及所有其他大小「隱藏」。

我得到的是，雖然新的圖像確實加載，但舊圖像不隱藏。它們仍然可見。如果我刷新頁面，則會顯示正確的圖像。它是不是正確更新它的屬性的鐵媒體查詢，還是它沒有相應更新的模板[dom-if]標籤。

<dom-module id="app-image"> 
    <!-- Should select correct image based on size --> 
    <style> 
     :host { 
      display: inline-block; 
      position: relative; 
      overflow: hidden; 
     } 
     :host > ::content img { display: block; } 
    </style> 
    <template> 
     <iron-media-query query="(max-width: 421px)" 
         query-matches="{{isTiny}}"></iron-media-query> 
     <iron-media-query query="(min-width: 422px) and (max-width: 641px)" 
         query-matches="{{isSmall}}"></iron-media-query> 
     <iron-media-query query="(min-width: 642px) and (max-width: 1201px)" 
         query-matches="{{isMedium}}"></iron-media-query> 
     <iron-media-query query="(min-width: 1202px)" 
         query-matches="{{isLarge}}"></iron-media-query> 

     <template is="dom-if" if="{{isTiny}}"> 
      <content select="[tiny]"></content> 
     </template> 

     <template is="dom-if" if="{{isSmall}}"> 
      <content select="[small]"></content> 
     </template> 

     <template is="dom-if" if="{{isMedium}}"> 
      <content select="[medium]"></content> 
     </template> 

     <template is="dom-if" if="{{isLarge}}"> 
      <content select="[large]"></content> 
     </template> 

    </template> 
</dom-module> 
<script> 
    Polymer({ 
     is: "app-image" 
    }); 
</script> 

這裏是這個標籤的使用一些示例代碼：

<app-image> 
    <img tiny src="http://lorempixel.com/200/100/abstract/" /> 
    <img small src="http://lorempixel.com/300/150/food/" /> 
    <img medium src="http://lorempixel.com/600/300/animals/" /> 
    <img large src="http://lorempixel.com/800/400/city/" /> 
</app-image>