In der vorherigen Artikel von KnockoutJs Learning Series (I) KO wurde erwähnt, dass die Datenbindungsmethode von Data-Bind = "xx: oo" in KO nicht nur Text, Wert usw. binden, sondern auch sichtbare, Stil- und andere Aussehensattribute, Klick-, Textinput- und andere Ereignisse und sogar den Steuerungsprogramm fließen können. Verschiedene ausgefallene Bündel werden Ihre Fantasie definitiv befriedigen.
Im Folgenden geht kurz über die Verwendung verschiedener Bindungen, die hauptsächlich in drei Typen unterteilt sind: Darstellung, Prozess und Wechselwirkung gemäß den gebundenen Eigenschaften.
Leistungsattribute
Zu den Bindungsmerkmalen des Präsentationsklassens gehören sichtbar, Text, HTML, CSS, Stil und Attr. Mit Ausnahme der Klasse, die CSS CSS repräsentiert, ist alles andere leicht zu verstehen. Natürlich sollte die Namensnamen im Stil mit JS übereinstimmen, und es sollte entfernt werden - wie unten gezeigt in das Kamelbenennen geändert:
<!-HTML-Code-> <div daten-bind = "Sichtbar: SollteSage"> Sie werden diese Nachricht nur sehen, wenn "sollshowMessage" einen echten Wert enthält. ProfitWarning: CurrentProfit () <0} "> CSS-Klassenbindungstest </div> <div daten-bind =" Stil: {Farbe: CurrentProfit () <0? {SHOWSHOWMESSAGE: Ko.OBServable (true), // Nachricht anfangs Visiblemymessage: Ko.OBServable (), // anfangs blankdetails: ko.observable (), // Anfangs der leeren Erscheinung: Ko.OBSUSSIBABLE (150000), // positive Wert, sofelell leer, anfangs anwenden, wenden Sie sich nicht an. Ko.OBServable (150000), // positiver Wert, also anfangs Blackurl: Ko.Observable ("Jahr-End.html"), Urltitle: Ko.OBServable ("Bericht einschließlich der letzten Jahres-End-Statistik")}; Ko.applybindings (ViewModel); // Bindungen anwendenDer Effekt ist so:
Wie im vorherigen Artikel erwähnt, können Sie zusätzlich zu den einzelnen Attributen von XXOO auch JSON -Objekte übergeben, dh Sie können Bindungsattribute kombinieren, wie z. B.:
<!-Html Code-> <div daten-bind = "{sichtbar: SollteShowMessage, Text: MyMessage, CSS: {ProfitWarning: CurrentProfit () <0}}"> Sie werden diese Nachricht nur sehen, wenn "SollteshowMessage" einen wahren Wert hat. </Div>Natürlich ist der Effekt so:
Die Einstellung der Präsentationsklasse ist relativ einfach. Eine Sache zu beachten ist, dass viele Präsentationsklassen nicht dynamisch geändert werden müssen. Zu diesem Zeitpunkt können Sie die ViewModel -Einstellungen verwenden, um eine zentralisierte Initialisierung der Daten zu erreichen, sie jedoch nicht auf Observablen festlegen, wie z. B.:
// JS CODEVAR ViewModel = {sollteshowMessage: ko.observable (true), // Nachricht anfangs Visiblemymessage: 'Dieser Text erfordert keine dynamische Aktualisierung' // anfangs leer};Prozessklassenattribute
Zu den Prozessklassen gehören Foreach, IF, IFNOT, mit und fortgeschritteneren "Komponenten" -Bindungen. Wenn und IFNOT ähnlich wie sichtbar. Die Differenz ist: Wenn die entsprechenden Komponenten direkt aus dem DOM entfernen, während sich nur sichtbar befindet, steuert sich nur die versteckte Anzeige und die Komponenten befinden sich noch im DOM. mit hat den gleichen Effekt wie in JS, nämlich die Umfangskette. In einfachen Worten soll ein "Präfix" hinzugefügt werden. vor der Variablen. Hier werde ich nur für Each vorgestellt, und die Komponente wird zusammen mit der Vorlagenbindung platziert.
Schauen Sie sich den Code an:
<!-HTML-Code-> <p> Test foreach Bindung </p> <ul data-bind = "foreach: people"> <li> Nein. href = "#" data-Bind = "klicken: entfernen"> entfernen </a> </li> </ul> <Eingabe type = "button" -Bind = "klicken: addpeople" value = "add"/> var listModel = function () {// Setzen Sie den Wert des People-Arrays (personen sind tatsächlich ein Funktionsarray). Verwenden Sie, um das Array -Objekt zu durchqueren // ul, li entspricht den Kindern von Menschen und Menschen. Daher ist der Umfang im People Child {Name ...}, wenn sie intern binden. Um Remepeople Outside -Personen aufzurufen, ist $ übergeordnet // Wenn es intern aufgerufen wird, ist dies in Remove {Name ...} entsprechend dem aktuellen LI -Element, und der Umfang ist die aktuelle Domäne, es ist kein $ Elternteil erforderlich. this.people = ko.obserservablearray ([{name: "mark zake", entfernen: function () {that.people.remove (this); // Beachten Sie das aktuelle Objekt (das ist {Name ...}) und Scope. {that.people.remove (this);}}, {name: "green Deny", entfernen: function () {that.people.remove (this);}}]); // Adpeople nennt die Methode derselben Ebene der Menschen intern. Dies wird sich ändern, und dies sollte im Voraus gespeichert und übergeben. Was Sie ausführen möchten, ist listModel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.applybindings (neuer listModel ());Was hier einfacher zu spielen ist, ist die hierarchische Korrespondenz zwischen dem DOM -Knoten und dem ViewModel. Bewerben Sie sich zunächst die Bindung von UL, dh jeder Li entspricht jedem Personen. Danach entspricht Sie es entsprechend den Umfangsregeln von JS. Apropos Umfang, ich muss das erwähnen. Wie das Sprichwort sagt, behandle ich das so, als wäre ich meine erste Liebe, und das hat mich tausende Male ausgetrickst. Hier fügte Xiaojia der offiziellen Version eine Entfernungsfunktion hinzu, die dem offiziellen RemovalPeople einfach zu entsprechen ist. Was Variablen wie $ index und $ parent betrifft, verstehen Sie sie einfach buchstäblich.
Interaktionsklassenattribute
Schließlich ist es Zeit, den Punkt zu bekommen. Der wichtigste Grund für die Verwendung von KO ist die Bewältigung des Problems mit der dynamischen interaktiven UI -Präsentation. Hier werden wir einige Bindungen in Bezug auf Formulare einführen.
(1) Klicken Sie auf die Bindung
Syntax: Data-Bind = "Click: ClickHandler". Die ClickHandler -Funktion hier kann eine beliebige Funktion sein, nicht unbedingt eine Funktion im ViewModel, solange sie verwiesen werden kann. Es gibt einige Dinge, die über das Click -Ereignis zu beachten sind:
1. Parameterübergabe, KO übergibt die aktuelle Komponente als erster Parameter standardmäßig an die Funktion ClickHandler. Achten Sie hier auf den aktuellen Bindungskontext. In der With -Umgebung wird die zurückgegebene Komponente beispielsweise zur mit der gewünschten aktuellen Komponente mit Komponente. Wenn Sie auch den Ereignisparameter übergeben müssen, übergeben Sie das Ereignis als zweite Parameter. Wenn Sie weitere Parameter übergeben müssen, müssen Sie es mit einer Funktion einwickeln. wie:
<button data-bind = "Klicken: Funktion (Daten, Ereignis) {myfunction ('param1', 'param2', data, event)}"> Klicken Sie auf mich </button>2. Einstellungen des Standardverhaltens (z. B. Links)
KO ist standardmäßig das Ereignisverhalten verboten, und wir binden normalerweise Klickereignisse für Links und lassen sie nicht springen. Wenn Sie es jedoch aktivieren müssen, geben Sie es einfach in ClickHandler zurück.
3. Blase
KO darf standardmäßig sprudeln. Sie können das Klickenereignis feststellen, um nicht nach Daten zu blasen. "Klicken: ClickHandler, ClickBubble: False".
(2) Ereignisbindung
KO bietet diese Oberfläche für Benutzer, um Bindungsereignisse anzupassen. In Bezug auf Parameterüberschreitung, Standardverhalten, Blasen usw., die gleiche wie Klickbindung, Anwendungsfall:
<div> <div data-Bind = "Ereignis: {Mausover: EnabledSeails, Mausout: DisabledSeails}"> Maus über mich </div> <div data-bind = "sichtbar: detailsabled"> details </div> </div> <script type = "text/javaScript"> var variable = {details: ko. {this.detailsenabled (true);}, DisabledTails: function () {thetaTailsenabled (false);}}; ko.applybindings (ViewModel); </script>(3) Bindung einreichen
Es wird hauptsächlich verwendet, um einige Überprüfungsformationen zu erledigen. KO blockiert die Standardeinstellungsformatklage und überträgt auf die Funktion "Sugling Bound". Wenn Sie in Zukunft einreichen müssen, geben Sie im verbindlichen Ereignis True zurück.
PS: Warum nicht Klick -Ereignisse im Formular verwenden, um es zu verarbeiten? Da Subjekt ursprünglich für die Übertragung von Einreichungsveranstaltungen ausgelegt ist, kann es auch Einreichungsaktionen wie die Kutschenrendite akzeptieren, Klick jedoch nicht.
(4) Wert ist an textInput gebunden
Der Bindungswert und das Textinput im Eingabefeld sehen ähnlich aus, es wird jedoch eher empfohlen, das Textinput -Ereignis zur Bindung zu verwenden, da TextInput eine neue Person ist, die speziell zur Verarbeitung von Eingangsereignissen verwendet wird. Wie Sie im vorherigen Artikel sehen können, muss der Fokus bei Verwendung der Wertbindungseingabe (links) aus dem Eingabefeld verschoben werden, bevor es aktualisiert wird, während TextInput (rechts) sofort aktualisiert wird.
Obwohl die Wertbindung auch den gleichen Effekt wie textInput durch Einstellen von daten-bind = "{value: price, ValueUpdate: 'AfterKeydown'}" erreichen kann, ist dies nicht so kompatibel mit TextInput im Browser.
(5) Optionsbindung (Ausgewählte)
In der Dropdown-Liste können Optionen verwendet werden, um den Wert des Kindes zu binden. Das Kind kann entweder eine Zeichenfolge oder ein JS -Objekt sein. Der vorherige Artikel ([Knockoutjs Learning Experience Journey] (1) KO First Experience) zeigt Strings, und diesmal werde ich ein Objekt weitergeben:
Code:
<p> Ihr Land: <Data-Bind = "Optionen: Verfügung SelectedCountry (). CountryPopulation: 'unbekannt' "> </span>. </div> <script type =" text/javaScript "> // Konstruktor für ein Objekt mit zwei Eigenschaftenvar Country = Funktion (Name, Bevölkerung) {this.countryname = name; this.countrypopulation = population;}; var var varvelyel = {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{obStrowntries;};}; {{{{{{{{oder Country ("UK", 65000000), New Country ("USA", 320000000), neues Land ("Schweden", 29000000)), SelectedCountry: Ko.Observable () // Nichts ausgewählt ausgewählt}; Ko.applybindings (viewModel); </script>;Hier ist eine Option, um die Option Listenfeld zu binden, und ein Wert wird verwendet, um das ausgewählte Element zu binden. Da es sich bei den Optionen um JS -Objekte handelt, müssen Sie einen OptionText verwenden, um die Anzeige im Listenfeld anzugeben. OptionCaption bezieht sich auf den Standardanzeigewert, wenn kein Element ausgewählt ist. Wenn wir ein Multi-Selekt-Listenfeld festlegen, können wir den Wert nicht zum Binden ausgewählter Elemente verwenden. Zu diesem Zeitpunkt sollten Selektionen verwendet werden, um ausgewählte Elemente zu binden.
(6) Andere Bindungen: Aktivieren/Deaktivieren, Hasfokus, Überprüfungen, Uniquename.
Diese Ereignisse sind sehr einfach zu bedienen, daher werde ich sie nicht ausführlich vorstellen. Der letzte Uniquename wird verwendet, um das eindeutige Namensattribut der Formularsteuerung festzulegen. Wenn das Formular in den Hintergrund übermittelt wird, wird es nicht in den Hintergrund übermittelt, ohne den Wert des Namensattributs festzulegen, sodass eine solche Bindungsfunktion vorliegt. Auf der offiziellen Website gibt es einen weiteren relativ häufigen Effekt auf Hasfoucus:
Name:
Name: Bert Bertington
Klicken Sie auf den Namen, um ihn zu bearbeiten. Klicken Sie an anderer Stelle, um Änderungen anzuwenden.
Wenn Sie auf den oben genannten Namen klicken, kann es bearbeitet werden und dann den Fokus verlieren und dann normaler Text werden. Dieser Effekt ist mit KO recht einfach zu implementieren.
Zusammenfassen
In diesem Artikel wird hauptsächlich die Verwendungsmethoden verschiedener Bindungen in KnockoutJs vorgestellt. Mit der Kombination dieser Bindungsmethoden können Sie einfach eine UI -Seite erstellen, die dynamischere Interaktionen erfordert. Das Wichtigste, um diese Methoden zu verwenden, ist sich daran zu erinnern, dass alle Bindungen Funktionsobjekte sind, sodass Sie direkt in HTML arbeiten können, damit die JS -Codestruktur manchmal einfacher sein kann.
Offizielles Tutorial: http://knockoutjs.com/documentation/inTroduction.html