atrybut ukryty w Polymer 1,0

Question

Nie używałem Polymer od czasów 0,4-0,5 i jestem przyzwyczajony do korzystania ukryty atrybut jak tak <my-element hidden="{{foo != bar}}"></my-element>

Teraz w Polymer 1,0 widzę, że trzeba użyć wartości obliczone z metody dla wszystkiego, co nie jest prostą wartością boolowską. mam kod jak poniżej:

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

A następnie w sekcji skryptu:

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

Teraz w konsoli komunikat pojawia się dwa razy po odświeżenie strony, ale gdy wartość foo zmian element nie zniknie. Co ja robię źle?

Answer 1

Jeśli chcesz wywołać ponowne przeliczenie funkcji po zmianie foo, musisz upewnić się, że foo jest właściwością i przekazać ją do funkcji jako argument. Oto mały przykład.

<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> 

Pamiętaj, że aby powiązać atrybuty, powinieneś użyć $=.

Answer 2

Istnieją dwie kwestie. Jak zauważa Maria, musisz mieć przypisaną metodę do parametrów, które będą reagować na powiadomienia Polymer. Tak więc zarówno foo, jak i bar muszą zostać zadeklarowane jako właściwości elementu.

Inną kwestią jest to, że "ukryty" to boolean attribute, co oznacza, że ​​sama jego obecność wskazuje, że element powinien być ukryty. W Polymer 1.0, przy użyciu $ w hidden$= zmiany ukryte w powiązaniu właściwości i będą obsługiwać ciągi. Bez $, hidden= oceni tylko surową wartość logiczną. hidden nie znajduje się na liście wymaganej $ w natywnych atrybutach html, więc wybór należy do Ciebie.

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

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

Dzięki tej annotated attribute binding, „ukryte” pojawi się na elemencie tylko wtedy, gdy wartość kalkulowana jest truthy, który jest zachowanie chcesz. Dzięki prostemu "=" powiązaniu, "ukryty" pojawi się, nawet jeśli twoja funkcja zwróci true, null lub jakąkolwiek inną wartość.