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

【问题标题】：iron-media-query doesn't work - Polymer 1.0铁媒体查询不起作用 - Polymer 1.0
【发布时间】：2015-12-10 01:51:09
【问题描述】：

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

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

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

【讨论】：

我还必须将is="dom-if" 添加到模板标签中。谢谢:)

【解决方案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>

【讨论】：

这很简单，但给了你一个可读的属性，并且避免了 dom-if。