So funktionieren Text- und Darstellungsbindungen in KnockoutJs

Dieser Inhalt ist im Grunde eine Übersetzung der Originalmaterialien. Ziel ist es, mehr über KnockoutJs für Magento 2 zu erfahren und Inhalte auf Portugiesisch über KnockouJs zu erstellen.

Dokumentation

• Die Datenbindungssyntax
• Bindungskontext
• Die „sichtbaren“ und „versteckten“ Bindungen
• Die „Text“-Bindung
• Die „HTML“-Bindung
• Die „class“- und „css“-Bindungen
• Die „Stil“-Bindung
• Die „attr“-Bindung

Bindungen

In KnockoutJs sind Bindungen die Möglichkeit, die Logik des ViewModel (die Daten- und Geschäftslogik) mit der Ansicht (HTML) zu verbinden. Kurz gesagt: Durch Bindungen spiegelt die Benutzeroberfläche automatisch Änderungen in Ihren Daten wider, ohne dass das DOM direkt manipuliert werden muss.

Bindungen in KnockoutJs funktionieren über das data-bind-Attribut für HTML-Elemente. In diesem Attribut geben Sie die Bindung an, die Sie verwenden möchten, und die zugehörigen Werte.

Steuern von Text und Aussehen

Sichtbar

Die Bindung sichtbar wird verwendet, um die Sichtbarkeit von HTML-Elementen basierend auf dem Wert eines observable in seinem ViewModel zu steuern. Es ermöglicht Ihnen, Elemente basierend auf einer bestimmten Bedingung anzuzeigen oder auszublenden, die in Ihrem ViewModel.
definiert ist

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Wenn die Bedingung einen ähnlichen Wert wie „false“ hat (falsch, 0, null oder undefiniert), setzt die sichtbare Bindung den Stil auf „Keine“, wodurch er ausgeblendet wird. Dies hat Vorrang vor allen Anzeigestilen, die Sie mit CSS festlegen können.

Versteckt

Binding Hidden wird verwendet, um HTML-Elemente basierend auf dem Wert eines Observable aus Ihrem ViewModel auszublenden. Im Gegensatz zur *visible*-Bindung, die die Sichtbarkeit von Elementen steuert, verbirgt die *hidden*-Bindung UI-Elemente, wenn die angegebene Bedingung erfüllt ist.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Text

Der Binding-Text wird verwendet, um den Inhalt von HTML-Elementen mit dem Wert eines Observable aus seinem ViewModel zu aktualisieren. Dadurch kann der Text eines Observablen direkt in das HTML-Element eingefügt werden, wodurch sichergestellt wird, dass jede Änderung des Werts des Observablen automatisch im angezeigten Text widergespiegelt wird.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Wenn dieser Parameter ein beobachtbarer Wert ist, aktualisiert die Bindung den Text des Elements, wann immer sich der Wert ändert. Wenn der Parameter nicht observable ist, wird der Elementtext nur einmal festgelegt und später nicht erneut aktualisiert.

Wenn der angegebene Wert etwas anderes als eine Zahl oder eine Zeichenfolge ist, entspricht der angezeigte Text yourParameter.toString().

Da diese Bindung ihren Textwert mithilfe eines Textknotens festlegt, ist es sicher, einen beliebigen Zeichenfolgenwert festzulegen, ohne das Risiko einer HTML- oder Skriptinjektion einzugehen.

HTML

Binding HTML wird verwendet, um dynamische HTML-Inhalte in Ihre UI-Elemente einzufügen. Es ermöglicht die Aktualisierung des Inhalts eines Elements mit dem HTML, das aus einem observable oder einem Ausdruck aus seinem ViewModel generiert wurde.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs löscht den vorherigen Inhalt und setzt dann den Elementinhalt auf den Parameterwert, indem es die HTML-Funktion von jQuery verwendet oder den String in HTML-Knoten analysiert und jeden Knoten als untergeordnetes Element des Elements anhängt, wenn dies bei jQuery nicht der Fall ist verfügbar.

Wenn es sich bei diesem Parameter um eine observable handelt, aktualisiert die Bindung den Inhalt des Elements, wann immer sich der Wert ändert. Wenn der Parameter nicht observable ist, wird der Inhalt des Elements nur einmal festgelegt und später nicht erneut aktualisiert.

Wenn der angegebene Wert etwas anderes als eine Zahl oder eine Zeichenfolge ist, entspricht der angezeigte Text yourParameter.toString().

Klasse

Die Binding-Klasse wird verwendet, um CSS-Klassen zu steuern, die auf HTML-Elemente angewendet werden, basierend auf dem Wert eines Observable oder einem Ausdruck seines ViewModel. Dadurch können Sie die CSS-Klassen eines Elements basierend auf unterschiedlichen Bedingungen oder Zuständen Ihrer Anwendung dynamisch ändern. Eine Klasse ist kein gültiger Bezeichnername. Die korrekte Art und Weise, einem HTML-Element eine Klasse zuzuweisen, besteht darin, den Bezeichnernamen in Anführungszeichen zu setzen, sodass er zu einer literalen Zeichenfolge wird.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Der Parameterwert muss ein String sein, der der/den CSS-Klasse(n) entspricht, die Sie dem Element hinzufügen möchten. Wenn der Parameter auf ein Observable verweist, aktualisiert die Bindung die Klassen bei jeder Wertänderung, entfernt alle zuvor hinzugefügten Klassen und fügt die Klasse(n) des neuen Werts hinzu.

CSS

Binding CSS wird verwendet, um CSS-Stile dynamisch auf HTML-Elemente anzuwenden, basierend auf dem Wert eines Observable oder einem Ausdruck seines ViewModel. Dadurch können Sie die visuellen Stile eines Elements basierend auf unterschiedlichen Bedingungen oder Zuständen Ihrer Anwendung ändern. Sie können mehrere CSS-Klassen basierend auf derselben Bedingung definieren, indem Sie die Namen in Anführungszeichen setzen.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Es muss ein JavaScript-Objekt übergeben werden, in dem die Eigenschaftsnamen Ihre CSS-Klassen sind und deren Werte je nachdem, ob die Klasse zu diesem Zeitpunkt angewendet werden soll, als wahr oder falsch ausgewertet werden.

Wenn der Parameter auf einen observable-Wert verweist, fügt die Bindung die CSS-Klasse hinzu oder entfernt sie, wenn sich das observable ändert. Wenn der Parameter nicht auf ein Observable verweist, wird die Klasse nur einmal hinzugefügt oder entfernt und dies später nicht noch einmal.

Stil

Der Binding-Stil wird verwendet, um Inline-CSS-Stile auf HTML-Elemente anzuwenden, basierend auf dem Wert eines Observable oder einem Ausdruck seines ViewModel. Dadurch können Sie die visuellen Stile eines Elements direkt inline ändern, basierend auf verschiedenen Bedingungen oder Zuständen Ihrer Anwendung.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Es muss ein JavaScript-Objekt übergeben werden, in dem die Eigenschaftsnamen den Stilnamen und die Werte den Werten der Stile entsprechen, die Sie anwenden möchten.

Wenn der Parameter auf ein Observable verweist, aktualisiert die Bindung die Stile immer dann, wenn sich das Observable ändert. Wenn der Parameter nicht auf ein Observable verweist, werden die Stile nur einmal festgelegt und später nicht aktualisiert.

Wenn Sie einen Stil anwenden möchten, dessen Name kein zulässiger JavaScript-Bezeichner ist (weil er einen Bindestrich oder ähnliches enthält), können Sie ihn in Anführungszeichen setzen oder den Namen mit camelCase verwenden Stil.

• { 'font-weight': someValue }
• {fontWeight: someValue }

Wenn Sie einen einfachen numerischen Wert auf einen Stil anwenden, der eine Einheit erfordert, hängt KnockoutJs px an den Wert an, bevor der Stil festgelegt wird.

Attr

Das Binding-Attribut wird verwendet, um HTML-Attribute für Elemente basierend auf dem Wert eines observable- oder eines ViewModel-Ausdrucks festzulegen oder zu aktualisieren. Dadurch können Sie die Attribute von HTML-Elementen dynamisch ändern, basierend auf unterschiedlichen Bedingungen oder Zuständen Ihrer Anwendung.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Es muss ein JavaScript-Objekt übergeben werden, in dem die Eigenschaftsnamen den Attributnamen und die Werte den Werten der Attribute entsprechen, die Sie anwenden möchten.

Wenn der Parameter auf ein Observable verweist, aktualisiert die Bindung das Attribut immer dann, wenn sich das Observable ändert. Wenn der Parameter nicht auf ein Observable verweist, legt er das Attribut nur einmal fest und aktualisiert es später nicht.

Das obige ist der detaillierte Inhalt vonSo funktionieren Text- und Darstellungsbindungen in KnockoutJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!