Question

以下组件曾用于0.5，但在1.0中不起作用。如果我取消注释h1标签以显示iron-media-query返回的值，那么输出就是＆＃34; ,,＆＃34 ;;当然，这些值只是空白。

<dom-module id="app-image">
    <!-- Should select correct image based on size -->
    <style>
        :host {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }
        :host > ::content img { display: block; }
    </style>
    <template>
        <iron-media-query query="(min-width: 422px)"
                          queryMatches="{{ isSmall }}"></iron-media-query>
        <iron-media-query query="(min-width: 642px)"
                          queryMatches="{{ isMedium }}"></iron-media-query>
        <iron-media-query query="(min-width: 1202px)"
                          queryMatches="{{ isLarge }}"></iron-media-query>
        <!--
            Note: The following is just to see what the actual values are for
            the specific variables. Unfortunately, it's all just plain blank :(

            <h1><span>{{ isSmall }}</span>, <span>{{ isMedium }}</span>, <span>{{ isLarge }}</span></h1>
        -->

        <template is="dom-if" if="{{ !isSmall }}">
            <content select="[tiny]"></content>
        </template>

        <template is="dom-if" if="{{ isSmall && !isMedium }}">
            <content select="[small]"></content>
        </template>

        <template is="dom-if" if="{{ isMedium && !isLarge }}">
            <content select="[medium]"></content>
        </template>

        <template is="dom-if" if="{{ isLarge }}">
            <content select="[large]"></content>
        </template>
    </template>
</dom-module>
<script>
    Polymer({
        is: "app-image",
        ready: function() {
            console.log(this.isSmall);
            console.log(this.isMedium);
            console.log(this.isLarge);
        }
    });
</script>

当我期待布尔值时，3个console.log语句都返回undefined。这让我相信iron-media-query元素实际上并没有更新属性。

铁媒体查询的使用方式是否与之前的版本核心媒体查询不同？文件是否正确？

TA

Answer 1

将queryMatches重写为query-matches。

聚合物铁媒体查询不能像以前的版本一样工作

1 个答案: