Hidden-Attribut in Polymer 1.0

Habe ich nicht verwendet, Polymer, da die 0.4-0.5-ära und bin mit dem hidden-Attribut, wie so <my-element hidden="{{foo != bar}}"></my-element>

Nun in Polymer-1.0, ich sehe, die berechnete Werte aus einer Methode, die für alles, was nicht straight-up-ein boolescher Wert.
Ich habe meinen code wie folgt:

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

Und dann in den script Abschnitt:

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

Nun in der Konsole die Meldung kommt zweimal nach Aktualisierung der Seite, aber wenn der Wert der foo ändert, wird das element nicht verschwindet. Was mache ich falsch?

InformationsquelleAutor najm | 2015-08-23
  1. 9

    So, es gibt zwei Probleme. Als Maria Notizen, die Sie haben, um Ihre _computeHidden Methode gebunden Parameter reagiert, um die Polymer-Benachrichtigungen. So, beide foo und bar muss erklärt werden, wie Eigenschaften, die auf das element.

    Weiteres Problem ist, dass "versteckte" ist ein boolean-Attribut, was bedeutet, dass seine Anwesenheit zeigt an, dass das element soll ausgeblendet werden. In Polymer 1.0, mit $ im hidden$= änderungen versteckt, die in eine Eigenschaft verbindlich und wird Behandlung von strings. Ohne $, hidden= bewerten nur raw boolean. hidden ist nicht auf der Liste für die erforderlichen $ im nativen html-Attribute, so ist die Wahl bis zu Ihnen.

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

    Mit diesem annotiertes Attribut Bindung, "hidden" erscheint auf dem element nur dann, wenn Ihre berechnete Wert truthy, das ist das Verhalten, das Sie möchten. Mit einem einfachen "=" Bindung "hidden" wird auch dann angezeigt, wenn die Funktion gibt true zurück, oder null, oder jeder andere Wert.

    • Riesen Dank für "hidden" will appear on the element only if your computed value is truthy ich habe versucht, herauszufinden, wie man bedingt gelten ein Attribut den ganzen Nachmittag und die docs sind offenbar falsch.
    InformationsquelleAutor Eric Nguyen
  2. 7

    Wenn Sie möchten, dass für das auslösen der Neuberechnung Ihrer Funktion als foo änderungen, die Sie haben, um sicherzustellen, dass foo wird die Immobilie übergeben und in der Funktion als argument. Hier ist ein kleines Beispiel.

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

    Beachten Sie, dass das binden an die Attribute, die Sie verwenden sollten $=.

    • Warum der Umzug von einer einfachen syntax dazu? Definitiv scheint viel mehr umständlich, zumindest für mich.
    • Ich weiß es nicht. Einige Dinge, die geändert wurden aus performance-Gründen. Soweit Ausdrücke betrifft, so ist es möglich, dass wir Ihnen etwas in der Zeit zurück in die Zukunft. Ich hoffe, wir werden.
    • Sie brauchen nicht alle diese. Ich fügte hinzu, eine andere Antwort-Sie müssen nur den "$=" Teil.
    • Umgekehrt, es ist auch unwahr, dass man immer verwenden $=. Verwenden Sie es nur für die Bindung mit booleschen Attributen.
    • Ich bin nicht einverstanden. Wenn du weglassen, das argument der Funktion, es wird nur einmal bewerten. Also, wenn Sie wollen reevevaluate es, wenn sich Eigenschaften ändern, Sie müssen übergeben Sie als Argumente (siehe docs).
    • Es ist auch nicht wahr, dass $= ist für boolean-Attribute. Vielmehr ist es für alle Attribut-Bindungen (im Gegensatz zu property-bindings). Sie würde es auch verwenden, für class oder href zum Beispiel. Wieder haben Sie einen Blick auf die docs
    • Danke für den link zu den docs. Das war zu klären, aber die genaue Antwort ist irgendwo dazwischen. Was du meinst zu sagen, denke ich, dass $= ist nicht nur für "boolean-Attribute", aber auch überall dort, wo "native Bindungen" erforderlich sind (z.B. "style" und "class"). Hier ist ein mehr-präzise link in der Dokumentation. Sie sind auch direkt über die dynamische Bindung. Ich werde aktualisieren, meine Antwort ist ein klares Beispiel für Najm.
    • Mit den updates, ich habe keine Einwände mehr gegen und ich von Ihnen positiv bewertet werden Ihre Antwort.

    InformationsquelleAutor Maria
Schreibe einen Kommentar