Polymer 1.0 iron-media-query 在查询更改时调用函数

Question

我不太明白为什么下面的代码不起作用。我希望 iron-media-query 在查询更改时调用一个函数。我使用查询匹配和模板 if 让它工作，但这根本不是我想要的。这是我的代码：

<iron-media-query 
            query="(max-width:1024px)"
            query-matches="{{condensedscreen}}"
            query-changed="switchToCondensed">
        </iron-media-query>

我希望在满足此查询要求后调用 query-change="switchToCondensed"。 switchedToCondensed 函数如下：

switchToCondensed: function(e) {
            console.log("Condensed: "+this.condensedscreen);
            if(this.condensedscreen === true) {
                this.sectionbox = "section-boxes-condensed";
                this.setScreenSize = "checkoutBodyMobile";
                //this.sectionStyle = "sectionMobile";
                this.shippingSectionStyle = "shippingSectionMobile";
                this.allCardsStyle = "allCardsMobile";
                this.submitBtnStyle = "submitBtnMobile";
                this.gotocartStyle = "goToCartMobile";
            }
            else {
                this.sectionbox = "section-boxes";
                this.setScreenSize = "checkoutBody";
                //this.sectionStyle = "section";
                this.shippingSectionStyle = "shippingSection";
                this.allCardsStyle = "allCards";
                this.submitBtnStyle = "submitBtn";
                this.gotocartStyle = "goToCart";
            }
        }

如您所见，我想用它来更改我网页上的 CSS。我到底做错了什么？

Answer 1

所以我从来没有让查询更改工作。老实说，这似乎完全没用。无论如何，我首先将 $ 添加到我的 class 中，如下所示：

<div class$="[[allCardsStyle]]">

之后，我从 iron-media-query 中删除了 query-changed，因此它看起来如下所示：

<iron-media-query 
            query="(max-width:1024px)"
            query-matches="{{condensedscreen}}">
        </iron-media-query>

然后回到 JS 我添加了一个观察者来观察布尔变量的变化：

condensedscreen:{observer:"switchToCondensed"}

最后，通过观察变化，我让它调用了我的函数 "switchToCondensed"，该函数实际上将变量设置为移动与非移动：

switchToCondensed: function() {
        if(this.condensedscreen === true) {
            this.allCardsStyle = "allCardsMobile";
        }
        else {
            this.allCardsStyle = "allCards";
        }
    }

然后在我的 CSS 中，我有两种不同的样式，分别称为 allCards 和 allCardsMobile。希望这能帮助像我这样苦苦挣扎的人。

Answer 2

您是否尝试使用 "on-query-matches-changed" 而不是 "query-changed"？

<iron-media-query 
            query="(max-width:1024px)"
            query-matches="{{condensedscreen}}"
            on-query-matches-changed="switchToCondensed">
        </iron-media-query>

Polymer 1.0 iron-media-query 在查询更改时调用函数

Polymer 1.0 iron-media-query call function on query-changed

polymer-1.0