例如,我想计算屏幕宽度并将结果分配给一个介于 0 和 3 之间的数字。我正在尝试使用它iron-media-query
来做到这一点。
我希望看到(记录到控制台)其中一个查询返回一个值,true
而另外三个返回一个false
。但是,它们都返回一个值undefined
。
我究竟做错了什么?
仅供参考,解决此问题后,我计划在queryResult()
方法中添加一个条件来存储index
when queryMatches
is的值true
。
queryResult: function() {
...
if(this.queryMatches) {
this.set('mediaWidth', index);
}
...
}
http://jsbin.com/kamusivebi/1/edit?html,控制台,输出
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<template is="dom-repeat"
id="page"
items="[[queries]]"
>
<iron-media-query id="query"
full
query="[[item]]"
query-matches="{{queryMatches}}"
>
<span hidden>{{queryResult(index)}}</span>
</iron-media-query>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
queryMatches: Boolean,
queries: {
type: Object,
value: function() {
return [
'(max-width: 699px)' ,
'(min-width: 700px) AND (max-width: 899px)' ,
'(min-width: 900px) AND (max-width: 1124px)' ,
'(min-width: 1125px)' ,
];
},
},
},
queryResult: function(index) {
this.set('mediaWidth', index);
console.log('mediaWidth', this.mediaWidth);
console.log('queryMatches', this.queryMatches);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>