聚合物铁媒体查询不在dom重复元素上工作

Question

我在这里看到了很多关于在Polymer上使用flexbox和铁媒体查询的问题，但没有一个真正解决了我遇到的问题，这是相当一个简单的。我有一个dom-repeat模板，它在屏幕尺寸小于600px时垂直显示纸卡元素。我希望它们在屏幕展开大于600像素时水平显示，如果它们不能全部适合一行，最终会分成若干行，这些都必不可少。下面的代码仅在屏幕扩展到600像素以上时才垂直显示卡片。我可以在纯CSS中做到这一点，但即使在阅读文档并尝试演示之后，我仍然为铁媒体查询而苦苦挣扎。

更新：我想在一个

<template is="dom-if" if="{{wide}}"> 

包裹纸卡元素但取得的火力点查询元素停止工作。

这里是我的代码：

<!-- this is a custom web component --> 

<!-- dependencies --> 
<link rel="import" href="../bower_components/polymerfire/firebase-query.html"> 
<link rel="import" href="../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html"> 


<dom-module id="browse-events"> 
    <template> 
     <firebase-query 
         id="query-all" 
         path="/events" 
         data="{{events}}"> 
     </firebase-query> 

     <template is="dom-repeat" items="[[events]]" as="event"> 
      <custom-style> 
       <style is="custom-style" include="iron-flex iron-media-query"> 

        .flex-dir[wide-layout="wide"] .flexchild { 
         @apply --layout-horizontal; 
        } 

        paper-card { 
         margin: 5%; 
         font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
         font-size: 1em; 
         width: 300px; 
        } 

        summary::-webkit-details-marker { 
         display: none; 
        } 

        summary:after { 
         content: "+"; 
         font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
         font-size: 1.5em; 
        } 

        details[open] summary:after { 
         content: "-"; 
        } 

        details p { 
         width: 100%; 
        } 

       </style> 
      </custom-style> 


      <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query> 

      <div class="flex-dir" wide-layout$="{{wide}}"> <!-- flex container --> 
       <paper-card heading="[[event.title]]" class="flexchild"> 
        <div class="card-content"> 
         [[event.city]] 
        </div> 
        <div class="card-content"> 
         [[event.starttime]] 
        </div> 
        <div class="card-content"> 
         [[event.price]] 
        </div> 
        <div class="card-actions"> 
         <details> 
          <summary><!-- + icon --></summary> 
          <p>[[event.description]]</p> 
         </details> 
         <script> 

         </script> 
        </div> 
       </paper-card> 
      </div> 
     </template> <!-- end dom repeat --> 
    </template> 

    <script> 
     Polymer({ 
      is:'browse-events', 
      properties: { 
       events: { 
        type: Object 
       } 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

你为什么把里面的一切dom-repeat？ dom-repeat将模板内容的一个实例绑定到提供的数组中的每个对象。因此，重复styles和iron-media-query。

把你的<style>刚刚在<template>之后，然后，<firebase-query,<iron-media-query>等。

您需要为flexbox样式导入iron-flex-layout-classes.html 。 导入这样的：

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

iron-media-query是数据绑定到一个CSS媒体查询。所以，不需要包括风格。它给出表示页面是否与该媒体查询匹配的布尔值。如果wide为真，则它会将属性wide-layout与div一起放置为flex-dir类。你不需要在css中检查wide-layout="wide"。

下面是更新后的代码：

<dom-module id="browse-events"> 
<template> 
<custom-style> 
    <style is="custom-style" include="iron-flex"> 
    .flex-dir[wide-layout] .flexchild { 
     @apply --layout-horizontal; 
    } 

    paper-card { 
     margin: 5%; 
     font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
     font-size: 1em; 
     width: 300px; 
    } 

    summary::-webkit-details-marker { 
     display: none; 
    } 

    summary:after { 
     content: "+"; 
     font-family: Comfortaa, 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; 
     font-size: 1.5em; 
    } 

    details[open] summary:after { 
     content: "-"; 
    } 

    details p { 
     width: 100%; 
    } 
    </style> 
</custom-style> 

<firebase-query id="query-all" path="/events" data="{{events}}"> 
</firebase-query> 

<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query> 


<div class="flex-dir" wide-layout$="{{wide}}"> 
    <!-- flex container --> 
    <template is="dom-repeat" items="[[events]]" as="event"> 
    <paper-card heading="[[event.title]]" class="flexchild"> 
     <div class="card-content"> 
     [[event.city]] 
     </div> 
     <div class="card-content"> 
     [[event.starttime]] 
     </div> 
     <div class="card-content"> 
     [[event.price]] 
     </div> 
     <div class="card-actions"> 
     <details> 
      <summary> 
      <!-- + icon --> 
      </summary> 
      <p>[[event.description]]</p> 
     </details> 
     <script> 
     </script> 
     </div> 
    </paper-card> 
    </template> 
    <!-- end dom repeat --> 
</div> 

</template> 

<script> 
Polymer({ 
    is: 'browse-events', 
    properties: { 
    events: { 
     type: Object 
    } 
    } 
}); 

Plnkr：http://plnkr.co/edit/jfHNhIHijhMMy7jf90e0