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之间的数据不存在巨大差异，因此：

＆＃13;

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

＆＃13;

铁媒体查询不起作用 - 聚合物1.0

2 个答案: