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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen











Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
