polymer - 铁媒体查询不起作用 - 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，因此：

<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>