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

时间:2015-07-14 22:26:42

标签: polymer-1.0

我真的不明白为什么以下代码无效。我希望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。我到底错在了什么?

2 个答案:

答案 0 :(得分:3)

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

&#13;
&#13;
<div class$="[[allCardsStyle]]">
&#13;
&#13;
&#13;

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

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

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

&#13;
&#13;
condensedscreen:{observer:"switchToCondensed"}
&#13;
&#13;
&#13;

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

&#13;
&#13;
switchToCondensed: function() {
        if(this.condensedscreen === true) {
            this.allCardsStyle = "allCardsMobile";
        }
        else {
            this.allCardsStyle = "allCards";
        }
    }
&#13;
&#13;
&#13; 然后在我的CSS中我有两种不同的样式,叫做allCards和allCardsMobile。 希望这有助于像我这样与之抗争的人。

答案 1 :(得分:3)

您是否尝试使用&#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>