我真的不明白为什么以下代码无效。我希望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。我到底错在了什么?
答案 0 :(得分:3)
所以我从来没有让查询改变工作。老实说,这似乎完全没用。无论如何,我首先将$添加到我的类中,如下所示:
<div class$="[[allCardsStyle]]">
&#13;
之后我删除了从iron-media-query更改的查询,因此它看起来如下:
<iron-media-query
query="(max-width:1024px)"
query-matches="{{condensedscreen}}">
</iron-media-query>
&#13;
然后回到JS中我添加了一个观察者来观察布尔变量何时发生变化:
condensedscreen:{observer:"switchToCondensed"}
&#13;
最后,通过观察我所做的改变,我可以调用我的功能&#34; switchToCondensed&#34;实际上将变量设置为移动而不是:
switchToCondensed: function() {
if(this.condensedscreen === true) {
this.allCardsStyle = "allCardsMobile";
}
else {
this.allCardsStyle = "allCards";
}
}
&#13;
答案 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>