铁媒体查询不起作用 - Polymer 1.0

Question

我是 Polymer (1.0) 的新手。

我的 <iron-media-query> 元素不工作。控制台中没有错误，但不显示任何内容。

一些改进会很棒！我正在尝试启动它，运行已经 2 小时了。 :)

提前致谢

罗恩

<!-- Works correctly -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">

<dom-module id="custom-element">

  <style>
    // Styles here
  </style>

  <template>

    <iron-media-query query="{{query}}" queryMatches="{{smallScreen}}"></iron-media-query>

    <template if="{{smallScreen}}">
      <strong>Small Screen</strong>
    </template>

    <template if="{{!smallScreen}}">
      <strong>Big Screen</strong>
    </template>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'custom-element',

    properties: {
      query: {
        type: String,
        notify: true
      }
    }

  });

</script>

<custom-element query="(max-width:400px)"></custom-element>

Answer 1

您必须将 queryMatches="{{}}" 更改为 query-matches="{{}}"。

Answer 2

由于您还询问了有关优化的问题：

由于 SmallScreen 和非 SmallScreen 之间的数据没有太大差异，所以：

<strong>[[screenType]] Screen</strong>

<script>
    Polymer({
        is: 'custom-element',
        properties: {
            query: {
                type: String,
                notify: true
            },
            screenType: {type: String, computed: '_computeScreenType(smallScreen)'}
        },
        _computeScreenType: (t)=>{return t?"Small":"Big"}
    });
</script>

铁媒体查询不起作用 - Polymer 1.0

iron-media-query doesn't work - Polymer 1.0

polymer

polymer-1.0