Polymer iron-media-query not working as previous versions -
the following component used work in 0.5, doesn't work in 1.0. if uncomment h1 tag display values returned iron-media-query, output ",,"; meaning of course values blank.
<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: following see actual values specific variables. unfortunately, it's 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>
the 3 console.log statements return undefined
, when i'm expecting boolean values. leads me believe iron-media-query
element doesn't update property.
should iron-media-query used differently it's previous incarnation, core-media-query? documentation correct?
ta,
rewrite querymatches
query-matches
.
Comments
Post a Comment