Polymer 1.0 dom-if 在以前为真时不重新计算

Question

我有以下组件可以根据媒体查询显示特定图像。我期望看到的是 window 调整大小时，将加载和显示不同的图像，以及所有其他尺寸 "hidden".

不过我得到的是新图像确实正在加载，但旧图像没有被隐藏。它们仍然可见。如果我刷新页面，则会显示正确的图像。是 iron-media-query 没有正确更新属性，还是模板[dom-if] 标签没有相应更新。

<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="(max-width: 421px)"
                        query-matches="{{isTiny}}"></iron-media-query>
        <iron-media-query query="(min-width: 422px) and (max-width: 641px)"
                        query-matches="{{isSmall}}"></iron-media-query>
        <iron-media-query query="(min-width: 642px) and (max-width: 1201px)"
                        query-matches="{{isMedium}}"></iron-media-query>
        <iron-media-query query="(min-width: 1202px)"
                        query-matches="{{isLarge}}"></iron-media-query>

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

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

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

        <template is="dom-if" if="{{isLarge}}">
            <content select="[large]"></content>
        </template>

    </template>
</dom-module>
<script>
    Polymer({
        is: "app-image"
    });
</script>

这里是使用中的这个标签的一些示例代码：

<app-image>
    <img tiny src="http://lorempixel.com/200/100/abstract/" />
    <img small src="http://lorempixel.com/300/150/food/" />
    <img medium src="http://lorempixel.com/600/300/animals/" />
    <img large src="http://lorempixel.com/800/400/city/" />
</app-image>

Answer 1

我只是结合了我的建议和你的建议。它可以解决您的问题。

<dom-module id="app-image">
    <!-- Should select correct image based on size -->
    <style>
        :host {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }
        div > ::content img { display: block; }
    </style>
    <template>
        <iron-media-query query="(max-width: 421px)"
                        query-matches="{{isTiny}}"></iron-media-query>
        <iron-media-query query="(min-width: 422px) and (max-width: 641px)"
                        query-matches="{{isSmall}}"></iron-media-query>
        <iron-media-query query="(min-width: 642px) and (max-width: 1201px)"
                        query-matches="{{isMedium}}"></iron-media-query>
        <iron-media-query query="(min-width: 1202px)"
                        query-matches="{{isLarge}}"></iron-media-query>

        <template is="dom-if" if="{{isTiny}}">
            <div hidden$="{{!isTiny}}">
                <content select="[tiny]"></content>
            </div>
        </template>

        <template is="dom-if" if="{{isSmall}}">
            <div hidden$="{{!isSmall}}">
                <content select="[small]"></content>
            </div>
        </template>

        <template is="dom-if" if="{{isMedium}}">
            <div hidden$="{{!isMedium}}">
                <content select="[medium]"></content>
            </div>
        </template>

        <template is="dom-if" if="{{isLarge}}">
            <div hidden$="{{!isLarge}}">
                <content select="[large]"></content>
            </div>
        </template>
    </template>
</dom-module>
<script>
    Polymer({
        is: "app-image"
    });
</script>

Answer 2

我认为你必须在 Polymer 中定义这 4 个属性：

Polymer ({
 is: "app-image",
 properties: {
  isTiny: Boolean,
  isSmall: Boolean,
  isMedium: Boolean,
  isLarge: Boolean,
 }
});

Answer 3

好的，这在我记录的 github 问题中得到了回答，事实证明确实有一种方法可以告诉模板它需要 "re-stamp" 本身。

<template is="dom-if" if="{{active}}" restamp="true">
    <content></content>
</template>

实际上有非常清楚的记录[1]；我想我阅读文档的速度太快了，只是为了寻找代码片段，而不是正确理解元素。

[1] https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if

Polymer 1.0 dom-if 在以前为真时不重新计算

Polymer 1.0 dom-if does not recalculate when previously true

media-queries

polymer