1

「サイズ」と呼ばれるポリマー変数に基づいてレンダリングされる条件付きテンプレートを持つポリマー要素があります

<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}}&deg;{{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}}&deg;{{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}}&deg;F</h1>
                    <h1 class="weather-value-forecast low">{{day.weather_condition.mintempF}}&deg;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';
        }
    }

適切なテンプレートはロード時にレンダリングされ、すべてが桃色です。ただし、サイズ変更イベントが発生し、変数が変更されても、何も起こりません。

テンプレートバインディングに基づいてサイズプロパティが変更されると、他のテンプレートがレンダリングされると思っていましたが、「非常に」間違っていました。私の質問は、双方向のバインドされた変数の変更に基づいて、ポリマーをテンプレート間で切り替えるにはどうすればよいですか?

これに関する情報をいただければ幸いです。

4

1 に答える 1

0

そのため、さまざまなビューにテンプレートを使用しなくなりました。代わりに、各条件付きビューを div として表示し、各 div の css 表示プロパティをポリマー変数に設定しました (以下を参照)。

    <div style="display:{{sizes.half}}">
        ...
    </div>

    <div style="display:{{sizes.regular}}">
        ...
    </div>

    <div style="display:{{sizes.double}}">
        ...
    </div>

私のスクリプトでは、画面変更イベントを処理するときに、各プロパティの値を変更するだけです。

 polymer.sizes.half = 'none';
        polymer.sizes.regular = 'none';
        polymer.sizes.double = 'none';
        polymer.sizes.triple = 'none';
        polymer.sizes.quadro = 'none';

        //half size (icon)
        if(width <= 55){
            polymer.sizes.half = 'inherit';
        }

        if(width > 55 && width <= 168){
            polymer.sizes.regular = 'inherit';
        }

        if(width > 168 && width <= 300){
            polymer.sizes.double = 'inherit';
        }

それは本当に単純に思えますが（単純すぎて魚の臭いがします）、私の問題を解決します. これが、私と同じ問題を経験する可能性のある人に役立つことを願っています.

于 2015-03-25T16:28:51.270 に答える