聚合物，铁媒体查询无法正常工作

Question

我希望铁媒体查询在查询匹配发生变化时调用一个函数并检查查询匹配是否为真，做点什么...

这是我的代码：

<dom-module id="example-example">
  <style>     
  </style>

  <template>

       <iron-media-query query="(min-width: 200px)" query-matches="{{small}}" on-query-matches-changed="detectSmall"></iron-media-query>
       <iron-media-query query="(min-width: 1400px)" query-matches="{{large}}" on-query-matches-changed="detectLarge"></iron-media-query>

  </template>

  <script>
    Polymer({
      is: 'example-example',
        detectLarge: function(){
            console.log(this.large);
        },
        detectSmall: function(){
            console.log(this.small);
        }
    });
  </script>
</dom-module>

我第一次加载页面时，我的设备宽度是 1300px 所以 this.small 应该是 true ，但它是未定义的。

我到底做错了什么？

Answer 1

原因是当您的更改事件被触发时，Polymer 仍未完成该元素。 如果你想在你的函数中访问该属性，你可以像这样使用它

detectLarge: function(e){
        console.log(e.detail.value);
    },