web-dev-qa-db-ja.com

Polymer 1.0の非表示属性

私は0.4-0.5の時代からPolymerを使用しておらず、_<my-element hidden="{{foo != bar}}"></my-element>_のように非表示の属性を使用することに慣れています。

Polymer 1.0では、ブール値をまっすぐにしないものについては、メソッドから計算された値を使用する必要があることがわかります。次のようなコードがあります。

<my-element hidden="{{_computeHidden()}}"></my-element>

そして、スクリプトセクションで：

_Polymer({
    is: 'super-element',
    properties: {...},
    _computeHidden: function(){
         console.log('its being called, mkay');
         return !(foo == bar);
    }
});
_

これで、コンソールでページの更新後にメッセージが2回表示されますが、fooの値が変更されても、要素は消えません。私は何が間違っているのですか？

polymerpolymer-1.0
9
najm

したがって、2つの問題があります。 Mariaが指摘しているように、_computeHiddenメソッドをPolymer通知に応答するパラメーターにバインドする必要があります。したがって、fooとbarの両方が必要です。要素のプロパティとして宣言する必要があります。

もう1つの問題は、「非表示」が ブール属性 であるということです。つまり、その存在自体が要素を非表示にする必要があることを示しています。 Polymer 1.0、$でhidden$=を使用すると、プロパティバインディングに隠された変更が行われ、文字列が処理されます。$がない場合、hidden=は評価されます。生のブール値です。ネイティブhtml属性で必要な$のリストにhiddenが含まれていないため、選択はあなた次第です。

Polymer({
    is: 'my-element',
    properties: {
      foo: Boolean,
      bar: Boolean
    },
    _computeHidden: function(){
      return !(this.foo == this.bar);
    }
});

<my-element hidden$="{{_computeHidden(foo, bar)}}"></my-element>

これで 注釈付き属性バインディング 、「hidden」は、計算された値が真である場合にのみ要素に表示されます。これは、必要な動作です。単純な「=」バインディングを使用すると、関数がtrue、null、またはその他の値を返した場合でも、「hidden」が表示されます。

9
Eric Nguyen

fooが変更されたときに関数の再計算をトリガーする場合は、fooがプロパティであることを確認し、それを引数として関数に渡す必要があります。これが小さな例です。

<dom-module id="register-me">
    <template>
        <div hidden$="{{compute(ishidden)}}">Hello from my local DOM</div>
        <button on-click="toggle">Toggle Hidden</button>
    </template>
    <script>
        Polymer({is: "register-me",
            properties: { ishidden: {
                type: Boolean,
                value: false
            } },
            compute: function() {
                console.log("computing...");
                return this.ishidden;
            },
            toggle: function() {
                this.ishidden = !this.ishidden;
            }
        });
    </script>
</dom-module>

属性にバインドするには、$=を使用する必要があることに注意してください。

7
Maria