Question

我真的不明白为什么以下代码无效。我希望iron-media-query在查询更改时调用函数。我使用查询匹配和模板工作，如果是，但这不是我想要的。这是我的代码：

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

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

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

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

＆＃13;

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

＆＃13;

之后我删除了从iron-media-query更改的查询，因此它看起来如下：

＆＃13;

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

＆＃13;

然后回到JS中我添加了一个观察者来观察布尔变量何时发生变化：

＆＃13;

condensedscreen:{observer:"switchToCondensed"}

＆＃13;

最后，通过观察我所做的改变，我可以调用我的功能＆＃34; switchToCondensed＆＃34;实际上将变量设置为移动而不是：

＆＃13;

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

＆＃13;

＆＃13; 然后在我的CSS中我有两种不同的样式，叫做allCards和allCardsMobile。希望这有助于像我这样与之抗争的人。

Answer 2

您是否尝试使用＆＃34; on-query-matches-changed＆＃34;而不是＆＃34;查询 - 更改＆＃34;？

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

查询更改后的Polymer 1.0 iron-media-query调用函数

2 个答案: