Polymer 聚合物铁介质查询与以前的版本不一样
以下组件过去在0.5中工作,但在1.0中不工作。 如果我取消对h1标记的注释以显示iron media query返回的值,则输出仅为“,”;当然,这些值是空的Polymer 聚合物铁介质查询与以前的版本不一样,polymer,Polymer,以下组件过去在0.5中工作,但在1.0中不工作。 如果我取消对h1标记的注释以显示iron media query返回的值,则输出仅为“,”;当然,这些值是空的 <dom-module id="app-image"> <!-- Should select correct image based on size --> <style> :host { display: inline-block;
<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="(min-width: 422px)"
queryMatches="{{ isSmall }}"></iron-media-query>
<iron-media-query query="(min-width: 642px)"
queryMatches="{{ isMedium }}"></iron-media-query>
<iron-media-query query="(min-width: 1202px)"
queryMatches="{{ isLarge }}"></iron-media-query>
<!--
Note: The following is just to see what the actual values are for
the specific variables. Unfortunately, it's all just plain blank :(
<h1><span>{{ isSmall }}</span>, <span>{{ isMedium }}</span>, <span>{{ isLarge }}</span></h1>
-->
<template is="dom-if" if="{{ !isSmall }}">
<content select="[tiny]"></content>
</template>
<template is="dom-if" if="{{ isSmall && !isMedium }}">
<content select="[small]"></content>
</template>
<template is="dom-if" if="{{ isMedium && !isLarge }}">
<content select="[medium]"></content>
</template>
<template is="dom-if" if="{{ isLarge }}">
<content select="[large]"></content>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "app-image",
ready: function() {
console.log(this.isSmall);
console.log(this.isMedium);
console.log(this.isLarge);
}
});
</script>
:主持人{
显示:内联块;
位置:相对位置;
溢出:隐藏;
}
:host>::content img{display:block;}
聚合物({
是:“应用程序图像”,
就绪:函数(){
console.log(this.isSmall);
console.log(this.isMedium);
console.log(this.isLarge);
}
});
当我需要布尔值时,3个console.log语句都返回未定义的
。这使我相信,ironmedia查询
元素实际上并没有更新属性
iron media query的使用是否应该与之前的核心media query有所不同?文档是否正确
ta,将
查询匹配
重写为查询匹配
已经尝试过,但没有成功。真正的问题似乎是iron media query上的“queryMatches”属性没有返回任何内容。它似乎返回“undefined”。我编辑了我的帖子,表明我已经尝试过dom,如果您尝试过查询匹配项了吗?在Polymer 0.8及更高版本中,由破折号分隔的属性转换为驼峰式属性。我的直觉是正确的。它是查询匹配项
。我将编辑我的答案。谢谢,这确实是问题所在。