我有一个聚合物元素,它具有要根据称为“大小”的聚合物变量呈现的条件模板
<template>
<!-- icon fonts. Please do not move -->
<link rel="stylesheet" href="meteocons/css/fontello.css">
<template if="{{size == 'half'}}">
<div fit layout center vertical>
<h1 class="weather-value">{{temperature.F}}°{{unit}}</h1>
<i class="{{icon_single}} weather-icon-single"></i>
<h3 class="weather-location">{{city}}, {{state}}</h3>
</div>
</template>
<template if="{{size == 'triple'}}">
<div fit layout center vertical>
<h1 class="weather-value">{{temperature.F}}°{{unit}}</h1>
<i class="{{icon_single}} weather-icon-single"></i>
<h3 class="weather-location">{{city}}, {{state}}</h3>
</div>
</template>
<template if="{{size == 'quadro'}}">
<div class="nam-weather-logo"><h5>NAM-weather</h5></div>
<div class="forecast-time"><h5>{{currTime}}</h5></div>
<div layout horizontal center-justified>
<h3 class="weather-location">{{city}}, {{state}}</h3>
</div>
<div layout horizontal center-justified><h5 class="weather-sub-title">5-Day Weather Forecast</h5></div>
<div layout horizontal center-justified>
<template repeat="{{day in forecast}}">
<div layout vertical center class="forecast-day">
<h1 class="weather-value-forecast">{{day.day}}</h1>
<i class="{{day.weather_icon}} weather-icon forecast"></i>
<h1 class="weather-value-forecast">{{day.weather_condition.maxtempF}}°F</h1>
<h1 class="weather-value-forecast low">{{day.weather_condition.mintempF}}°F</h1>
</div>
</template>
</div>
</template>
</template>
我处理一个事件,在窗口调整大小时,我根据视口的宽度更改“大小”聚合物属性。
rearrangeElements: function(){
var polymer = this;
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
//half size (icon)
if(width <= 55){
polymer.size = 'half';
}
if(width > 55 && width <= 168){
polymer.size = 'regular';
}
if(width > 168 && width <= 300){
polymer.size = 'double';
}
if(width > 300 && width <= 768 ){
polymer.size = 'triple';
}
if(width > 768){
polymer.size = 'quadro';
}
}
正确的模板在加载时呈现,一切都很好。但是,当 resize 事件触发并且变量更改时,什么也没有发生。
我认为当 size 属性发生变化时,根据我的模板绑定,另一个模板将被渲染,但我“大错特错”。我的问题是如何让聚合物基于更改 2 路绑定变量在模板之间切换?
将不胜感激任何信息。