Bootstrap ist ein Front-End-Framework, eine gute Sache für die Freizeit von Webentwicklern. Es zeigt, dass die Benutzeroberfläche sehr hochwertig, atmosphärisch und High-End ist. Theoretisch müssen Sie keine CSS -Zeile schreiben. Fügen Sie einfach die entsprechenden Attribute zum Tag hinzu.
Knockoutjs ist ein JavaScript-implementiertes MVVM-Framework. Sehr gut. Nach dem Zugabe oder Verringern der Listendatenelemente müssen beispielsweise nicht das gesamte Steuerfragment aktualisiert oder JS -Additions- und Löschknoten selbst geschrieben werden. Definieren Sie einfach die Vorlage und Attribute, die ihre Syntaxdefinitionen entsprechen. Einfach ausgedrückt, wir müssen nur auf den Zugriff auf Daten achten.
1. Einführung in Knockout.js
1. Knockout.js und MVVM
Heutzutage sind verschiedene Front-End-Frameworks überwältigend und blendend. Manchmal muss ich seufzen, dass es als Programmierer sehr schwer ist, es immer endlose Techniken zu lernen gibt. Wann wird es enden, es sei denn, Sie verwandeln sich! Das Meer des Leidens ist grenzenlos und ob es das Ufer ist, wenn Sie zurückblicken, liegt bei Ihnen!
Knockout.js ist ein leichtes Front-End-Framework, das auf dem MVVM-Modus basiert. Wie leicht ist es? Gemäß der neuesten Version V3.4.0, die auf der offiziellen Website angezeigt wird, ist es nur 22 KB. Es kann die Bindung zwischen dem Datenmodell und der Schnittstellendom auf freundliche Weise verarbeiten. Das Wichtigste ist, dass seine Bindung bidirektional ist. Das heißt, wenn sich das Datenmodell ändert, ändern sich die Daten in der Schnittstellen -DOM ebenfalls entsprechend. Umgekehrt ändert sich das Datenmodell auch entsprechend. Dies kann den Betrag unseres Front-End-Codes erheblich reduzieren und unsere Schnittstelle leicht zu pflegen. Wir müssen nicht mehr viele Ereignisüberwachungsdatenmodelle und Schnittstellen-DOM-Änderungen schreiben. Der Blogger wird diese beiden Punkte basierend auf einem Nutzungsbeispiel unten veranschaulichen.
Offizielle Website von Knockout.js: http://knockoutjs.com
Knockout.js Open Source -Adresse: https://github.com/knockout/knockout
MVVM -Modus: Dies ist ein Designmodell zum Erstellen von Benutzeroberflächen. MVVM spaltet es in drei Stücke auf, nämlich Modell, Ansicht und ViewModel, Modell ist das Datenmodell, die Ansicht ist unsere Ansicht und ViewModel ist ein Ansichtsmodell, das zum Binden des Datenmodells und der DOM -Elemente in der Ansicht verwendet wird. Wenn Sie WPF und Silverlight verwendet haben, sollte es kein Problem sein, dies zu verstehen. Es ist kein Problem, es nicht benutzt zu haben. Nach dem Lesen dieses Artikels haben Sie ein allgemeines Verständnis.
2. Das einfachste Beispiel
Wenn Sie Knockout.js von Grund auf neu verwenden, müssen Sie im Allgemeinen mindestens die folgenden vier Teile durchführen
2.1. Gehen Sie zur offiziellen Website, um die Datei knockout.js herunterzuladen, und zitieren Sie sie dann auf der Ansichtsseite.
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script>
HINWEIS: Knockout.js erfordert keine Unterstützung von JQuery. Wenn Ihr Projekt JQuery -verwandte Operationen erfordert, lesen Sie JQuery. Ansonsten verweisen Sie nur auf die obigen Dateien.
2.2. Definieren Sie ViewModel
Was ist ViewModel? Tatsächlich sieht es in JS wie ein JSON -Objekt aus. Wir definieren ein ViewModel:
var myviewModel = {name: "lilei", Beruf: "Software -Ingenieur",};2.3. Definieren Sie das Tag, das die Datenbindung in der Ansichtsansicht bindet
<Div> Name: <Label Data-Bind = "Text: Name"> < /label> <br /> Beruf: <Eingabe type = "text" data-bind = "textInput: profession
HINWEIS: Textinput ist für Text erforderlich, der den Eingabe -Tags entspricht, während Text für Text für gewöhnliche Tags erforderlich ist.
2.4. Bindung aktivieren
Nach den oben genannten drei Schritten müssen Sie auch die Bindung von Knockout aktivieren
Ko.Applybindings (MyViewModel);
Durch diese vier Teile wird die einfachste ViewModel -Datenbindung im Wesentlichen implementiert. Erhalten Sie den Effekt:
Wenn Sie vorsichtig genug sind, werden Sie feststellen, dass die Methode Ko.ApplyBindings () zwei Parameter enthält. Das erste ist das ViewModel, das wir binden müssen, und was ist das zweite? Von Ko.Applybindings (MyViewModel); Wir können sehen, dass der zweite Parameter ein optionaler Parameter ist, der den Umfang des an das ViewModel gebundenen Tags darstellt. Lassen Sie uns beispielsweise den oben genannten Code ändern:
<Div> Name: <label id = "lb_name" data-bind = "text: name"> < /label> <br /> Beruf: <Eingabe type = "text" data-bind = "textInput: profession" /> < /div> ko.applybindings (myviewModel, document.getElementById ("lb_name"););Holen Sie sich das Ergebnis:
Daraus können wir erkennen, dass der zweite Parameter den Wirkungsumfang von MyViewModel definiert, dh nur eine Bindung für die Beschriftung von id = "lb_name" wird wirksam. Wenn der zweite Parameter eine Containerbezeichnung wie DIV ist, bedeutet dies, dass der Umfang der Bindung alle Unterkennzeichen unterhalb der DIV sind.
3. Überwachungsattribute
Ab vier Schritten können wir keinen Effekt sehen. Was wir sehen, ist nichts anderes, als die Daten eines JSON -Objekts an das HTML -Tag zu binden. Was ist der Sinn, dies zu tun? Kompliziert es nicht einfache Probleme? Mach dir keine Sorgen, beobachten Sie sofort das Wunder! Wie oben erwähnt, liegt die wichtigste Bedeutung von Knockout in einer Zwei-Wege-Bindung. Wie kann man unsere bow-Wege-Bindung erreichen? Die Antwort ist Überwachungsattribute.
Bei Knockout gibt es drei Überwachungsattribute im Kern: Observables, abhängige Bedienungsstoffe, Beobachtungsablagen. Die Bedeutung von Beobachtung wird als Beobachtung und Beobachtung übersetzt. Wenn es sich unangemessen anfühlt zu sagen, dass es sich um ein Beobachtungsattribut oder ein Beobachtungsattribut handelt, werden wir es vorerst ein Überwachungsattribut nennen.
3.1. Observable: Überwachungseigenschaften
Ändern wir das obige Beispiel dazu:
<Head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> Index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/Knockout-0.0.Min.Min.js" </script> </cricpt-name: data-bind = "text: name"> </label> <br/> Beruf: <Eingabe type = "text" data-bind = "textInput: profession"/> </div> <div> <Eingabe type = "text" id = "txt_TestObservable"/> </div> <script type Ko.Observable ("lilei"), Beruf: "Software -Ingenieur",}; // 2. Aktivieren Sie die bindenden Ko.Applybindings (myViewModel);Die Bedeutung dieses Satzes besteht darin, die Namenseigenschaft des ViewModel zu einer Überwachungseigenschaft hinzuzufügen. Die Namenseigenschaft muss zu einer Überwachungseigenschaft werden. Eine magische Sache wird passieren. Schauen wir uns an, wenn wir MyViewModel schreiben .:
Der Name hat sich von der ursprünglichen Eigenschaft zu einer Methode geändert, dh, sobald Ko.Observable () hinzugefügt wird, wird die entsprechende Eigenschaft zu einer Methode. Daher muss der Wert und die Zuordnung des Namens mit MyViewModel.Name () behandelt werden. Schauen wir uns den Effekt an:
Code Zweifel: Es ist offensichtlich, dass MyViewModel.name ($ (this) .val ()); Dieser Satz weist der NAME -Eigenschaft den Wert des aktuellen Textfelds zu. Da die Schnittstelle die Namenseigenschaft bindet, ändert sich der Wert in der Etikett auch entsprechend. Oder Sie würden sagen, dass dies mit dem TextChange -Ereignis erfolgen kann. Solange der Wert des aktuellen Textfelds dem Etikett -Tag zugeordnet ist, kann dieser Effekt erreicht werden, was nichts ist. In der Tat kann Ihre Schreibmethode auch den Zweck erreichen, aber die Bedeutung unseres Überwachungsattributs ist, dass sich die Schnittstelle entsprechend ändert, wenn der Namenswert überall geändert wird, ohne den Etiketten -Tags an jedem Ort Werte zuzuweisen. In JS müssen Sie sich nur auf myViewModel.name () konzentrieren. Ist es nicht sehr toll ~~
3.2. Abhängige Beschäftigung: Überwachen Sie die Abhängigkeitseigenschaften
Wenn Sie die obigen Überwachungsattribute gelesen haben, sind Sie noch nicht zufrieden? Schauen wir uns die Verwendung von Überwachungsabhängigkeitsattributen an.
Wechseln wir den Code und schauen wir uns an:
<Head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/Knockout-34.0.Min.Min.Js". data-bind="textinput:Name" /><br />Profession: <input type="text" data-bind="textinput:Profession" /><br /> />Description: <label data-bind="text:Des"></label></div><script type="text/javascript">//1.Definition ViewModelvar myViewModel = {Name: Ko.OBServable ("lilei"), Beruf: Ko.Observable ("Software -Ingenieur"),}; Aktivieren Sie die bindende Ko.Applybindings (MyViewModel); </script> </body>Schauen wir uns den Effekt an:
Code Zweifel: Durch Hinzufügen von Überwachungsabhängigkeitsattribut Ko.DependentObservable () kann der Wert des DES -Attributs gleichzeitig auf die Änderungen von Namen und Professor überwacht werden. Wenn sich einer von ihnen ändert, löst das DES-gebundene Tag die Änderung aus. Der größte Vorteil davon ist, die Mühe zu vermeiden, das DOM von JS zu betreiben, was interessant ist.
3.3. Beobachtungsschild; Überwachen Sie Arrays
Zusätzlich zu den oben genannten zwei unterstützt KO auch die Überwachung von Array -Objekten. Schauen wir uns ein Beispiel an:
<head><meta name="viewport" content="width=device-width" /><title>Index3</title><script src="~/scripts/jquery-1.9.1.min.js"></script><script src="~/scripts/knockout/knockout-3.4.0.min.js"></script></head><body><div><select Data-Bind = "Optionen: Deptarr, OptionStext: 'name'"> </select> </div> <div> <Eingabe type = "text" id = "txt_testoBServable"/> <Eingabe type = "button" id = "btn_test" value = "New Department"/> </div: script type = "text/javaScript". Name: 'R & D Department'}, {id: 2, Name: 'Administrative Abteilung'}, {ID: 3, Name: 'Human Affairs Department'}]; oderSchauen Sie sich den Effekt an:
CODE -Zweifel: Die obige Methode Ko.OBServablearray () fügt die Überwachung von Array -Objekten hinzu. Das heißt, überall in JS wird die Benutzeroberfläche ausgelöst, solange die Änderungen des Arrays am Deptarr -Array -Objekt vorgenommen werden, um den entsprechenden zu geben. Eine Sache zu beachten ist, dass das Überwachungsarray tatsächlich das überwachte Array -Objekt selbst ist und nicht auf Änderungen in den Eigenschaften des untergeordneten Objekts im Array -Objekt überwacht werden kann. Zum Beispiel ändern wir das Klickereignis dazu:
$ (function () {$ ("#btn_test"). on ("click", function () {deptarr [1] .name = "aaa";});});Wirkung:
Dies zeigt, dass die Array -Überwachung das Array -Objekt selbst tatsächlich überwacht und die Änderungen in den Attributen von Elementen im Array nicht überwacht. Wenn Sie die Eigenschaftenänderungen von Objekten in den Daten wirklich überwachen müssen, müssen Sie Ko.Observable () für die Eigenschaft von Objekten in den Daten verwenden, und die beiden werden zusammen verwendet. Wenn Sie interessiert sind, können Sie es versuchen.
4. Gemeinsame Datenbindungsattribute in KO
Im obigen Bereich haben wir mehrere Datenbindungsattribute verwendet. Wie viele solcher Datenbindungsattribute gibt es in Knockout? Hier listen wir einige häufig verwendete Eigenschaften auf.
4.1. Text und InputText
Text bedeutet, wie der Name schon sagt, Text. Dieses Bindungsattribut wird im Allgemeinen verwendet, um Text mit Tags wie <label>, <span>, <div> usw. anzuzeigen. Wenn Sie möchten, kann diese Bindung für jedes Tag natürlich verwendet werden. Es ist im Grunde nichts zu sagen, es zu verwenden. Wenn Ko.Observable () nicht verwendet wird, handelt es sich um eine statische Bindung, sonst ist es eine dynamische Bindung.
InputText, der Text des Eingabetags, entspricht dem Wertattribut des Eingabe -Tags.
<div> Name: <label data-bind="text:Name"></label><br />Profession: <input type="text" data-bind="textinput:Profession" /></div> //1.Define ViewModelvar myViewModel = {Name: ko.observable("Lilei"),Profession: "Software Engineer",};//2. Aktivieren Sie die Bindungsko.Applybindings (myViewModel);4.2. Wert
Diese Bindungseigenschaft wird im Allgemeinen für Eingabe -Tags verwendet, was dem obigen EingabeText im Grunde ähnlich ist. Aber der Wert ist standardisierter.
Auch mit Wert wird ein Parameterwert verwendet, der angibt, welche Operation die Schnittstelle ausführt, wenn der Wert aktualisiert wird. Die Hauptwerte von ValueUpdate umfassen Änderungen/Taste/TastePress/AfterKeydown usw. Es gibt den Wert des ViewModel an, der dem Wert entspricht, wenn Textänderungen, Tastaturschrank, Tastaturgedrückung, Drücken von Tastaturen, Drücken von Tastaturen usw. entspricht.
Name: <Eingabe type = "text" data-bind = "Wert: Name, ValueUpdate: 'KeyUp'" /> <br /> var myViewModel = {Name: ko.observable ("lilei"),}; // 2. Aktivieren Sie die Bindungsko.Applybindings (myViewModel);Der obige Code gibt an, dass das Wert -Attribut des Textfelds und das Namensattribut von MyViewModel beim Schließen der Tastatur aktualisiert werden.
4.3. Überprüft
Überprüfte Bindung wird im Allgemeinen für Kontrollkästchen, Radio- und andere Formularelemente verwendet, die ausgewählt werden können, und der entsprechende Wert ist der Bool -Typ. Die Nutzung des Wertes ist im Grunde genommen ähnlich, daher werde ich sie nicht wiederholen.
4.4. aktivieren
Die Aktivierung der Bindung wird im Allgemeinen verwendet, um Etikettelemente zu aktivieren, und wird im Allgemeinen verwendet, um Formelemente zu aktivieren und zu deaktivieren. Im Gegensatz zu deaktiviert ist der entsprechende Wert ebenfalls Bool -Typ.
<Div> <Eingabe type = "text" data-bind = "enable: ismen"/> </div> <script type = "text/javaScript"> // 1. Define ViewModelvar myViewModel = {Name: Ko.Observable ("lilei"), Beruf: ko.observable ("Software-Ingenieur"), AGEM: Ko.OBServable (40), Ismen: Ko.Observable (wahr)}; // 2. Aktivieren Sie die bindenden Ko.Applybindings (MyViewModel); myViewModel.ismen (false); </script>Da die Eigenschaft Ismen falsch wird, werden alle entsprechenden Textfelder einen deaktivierten Status angezeigt.
4.5. deaktiviert
Entgegen der Aktivierung ist die Verwendung ähnlich wie möglich.
4.6. Optionen
Im obigen Unternehmen wurden Optionen verwendet, um die Auswahlbindung zu verwenden, was den Satz von Optionen des SELECT-Tags darstellt, und der entsprechende Wert ist ein Array, das die Datenquelle dieses Dropdown-Felds darstellt. Die Überwachung dieser Datenquelle kann mithilfe von Observablearray aktiviert werden. Siehe oben für die Verwendung.
4.7.html
Die Textbindung ist tatsächlich die Einstellung und den Wert des Tags InnerText. In ähnlicher Weise ist die HTML -Bindung auch die Einstellung und den Wert der Innerhtml. Sein entsprechender Wert ist ein HTML -Tag.
4.8. CSS
Die CSS -Bindung besteht darin, ein oder mehrere Stile (Klassen) zum DOM -Element hinzuzufügen oder zu entfernen. Verwenden Sie das Format:
<style type = "text/css">. testbold {Hintergrundfarbe: PowderBlue;} </style> <div daten-bind = "CSS: {testbold: myViewModel.name () == 'lilei'}"> aaaa </div> var myviewmodel = {name: ko.observe ("lileio (", ko. Ingenieur "), Alter: Ko.Observable (40)};Diese DIV zeigt die Hintergrundfarbe an.
Wenn Sie mehrere Stile hinzufügen oder entfernen müssen, ändern Sie sie beispielsweise leicht:
<div data-bind = "CSS: {testbold: myViewModel.name () == 'lilei', testborder: myViewModel.profession () == 'PHP-Ingenieur'}"> aaaa </div>4.9. Stil
Wenn die Funktion der CSS -Bindung darin besteht, das Tag dynamisch Klassenstile hinzuzufügen oder zu entfernen, besteht die Funktion der Stilbindung darin, dem Tag dynamisch einen bestimmten Stil hinzuzufügen oder zu entfernen. Zum Beispiel:
<div data-bind = "CSS: {Hintergrundfarbe: myViewModel.Name () == 'lilei'? 'Red': 'White'}"> aaaa </div>Wenn Sie mehrere mehrere addieren oder entfernen, verwenden Sie die CSS -Bindung
4.10, Attr
Die ATT -Bindung wird hauptsächlich verwendet, um ein oder mehrere Attribute (einschließlich benutzerdefinierter Attribute) zum Tag hinzuzufügen und zu entfernen, und ähnelt CSS.
4.11. Klicken
Klicken Sie auf das Bindungsbetriebsmittel hinsichtlich des entsprechenden DOM -Elements eine Klick -Ereignisausführungsmethode. Kann in jedem Element verwendet werden.
<Div> <Eingabe type = "button" value = "testen klicken klicken" data-bind = "klicken: clickFunc" /> < /div> var myViewModel = {clickFunc: function () {alert ($ (Ereignis).Event.currentTarget repräsentiert das derzeit geklickte DOM -Element. Manchmal verwenden wir zum Einfachheit halber direkt anonyme Funktionen, um zu binden, wie z. B.:
<div> <Eingabe type = "button" value = "testen klicken klicken" daten-bind = "klicken: function () {alert ('klickte');}" /> < /div>Diese Art, JS in HTML zu schreiben, macht es den Bloggern jedoch schwer zu akzeptieren, und sie sind der Meinung, dass es relativ unpraktisch ist, zu warten, insbesondere wenn die Logik im Klickereignis etwas kompliziert ist. Wenn es nicht erforderlich ist, wird nicht empfohlen, diese anonyme Funktion direkt zu schreiben.
4.12. Andere
Für alle Datenbindungen können Sie die Einführung auf der offiziellen Website sehen, und ich werde sie hier nicht einzeln auflisten. Wenn Sie es brauchen, gehen Sie einfach auf die offizielle Website, um es zu überprüfen. Schauen Sie sich alle auf der offiziellen Website aufgeführten Bindungen an:
5. Transformation und Beziehung zwischen JSON -Objekten und Überwachungsattributen
Wir wissen, dass wir im Allgemeinen JSON-Formatdaten verwenden, um direkte Präsentationsmethoden in verschiedenen Sprachen zu vermeiden, wenn wir mit dem Front-End und Back-End interagieren. Wir verwenden das vom Back-End abgerufene Datenmodell über HTTP-Anfragen. Um einige unserer KO -Funktionen zu verwenden, müssen wir diese gewöhnlichen Datenmodelle in die Überwachungsattribute von KO umwandeln. Umgekehrt verwenden wir die Überwachungsattribute von KO und müssen diese Attribute manchmal in gewöhnliche JSON -Daten umwandeln und an den Hintergrund weitergeben. Wie kann man diese Konvertierung erreichen?
5.1. Konvertieren Sie JSON -Objekt in ViewModel
Zum Beispiel nehmen wir ein JSON -Objekt aus dem Hintergrund und verwandeln es dann in unser ViewModel und binden es dann an unsere Schnittstelle.
$ .ajax ({url: "/home/getData", Typ: "get", data: {}, Erfolg: Funktion (Daten, Status) {var ojson = data;}});Wir senden eine Anfrage an das Backend, nehmen ein JSON -Objekt, weisen Ojson einen Wert zu und konvertieren dann den Ojson in ViewModel. Der intuitivste Weg ist es, es manuell zu konvertieren. Zum Beispiel können wir dies tun:
var myviewModeljson = {Deptname: Ko.OBServable (), Deptlevel: Ko.Observable (), Deptdesc: Ko.OBServable ()}; Ko.applybindings (myviewModeljson);Dann im Erfolg von Ajax
Erfolg: Funktion (Daten, Status) {var ojson = data; myViewModeljson.deptname (ojson.deptname); MyViewModeljson.deptlevel (ojson.detplevel);Auf diese Weise wird durch manuelle Bindung die Bindung des JSON -Objekts an das ViewModel realisiert. Der Vorteil, dies zu tun, ist Flexibilität, der Nachteil ist offensichtlich, die Menge des manuellen Codes ist zu groß.
Glücklicherweise gibt es mit unserer universellen Open Source immer Menschen, die einen besseren Weg finden. Wir können die Knockout.Mapping -Komponente verwenden, um das SchnittstellenjSON -Objekt in ViewModel umzuwandeln.
Knockout.Mapping Open Source -Adresse: Download
Schauen wir uns einen kurzen Blick darauf an, wie es verwendet wird, oder im obigen Beispiel. Wir müssen die Definition eines ViewModel nicht implementieren. Zunächst müssen wir uns auf Knockout.mapping.js beziehen
<script src = "~/scripts/Knockout/Knockout-3.4.0.min.js"> </script> <script src = "~/scripts/Knockout/Extensions/Knockout.Mapping-latest.js"> </script>
HINWEIS: HIER KLOCK.Mapping-Lastest.js muss hinter Knockout-3.4.0.min.js gelegt werden, ansonsten kann Ko.Mapping nicht aufgerufen werden.
Verwenden Sie es dann direkt in der Erfolgsfunktion
Erfolg: Funktion (Daten, Status) {var myviewModelJSON2 = ko.mapping.fromjs (Daten); Ko.Applybindings (myViewModelJson2);}Lassen Sie uns den Effekt sehen:
Code Zweifel: Das JSON -Objekt, das durch die AJAX -Anforderung aus dem Hintergrund abgerufen wird, wird bequem in ViewModel durch ko.mapping.fromjs () konvertiert. Ist es nicht scharf? Zusätzlich zu dieser Verwendung können Sie das vorhandene ViewModel auch aktualisieren und wie folgt verwenden:
var myviewModeljson = {Deptname: Ko.Observable (), Deptlevel: Ko.Observable (), Deptdesc: Ko.OBServable ()}; Ko.Applybindings (myviewModeljson); {}, Erfolg: Funktion (Daten, Status) {Ko.Mapping.fromjs (Daten, myViewModeljson)}});});Aktualisieren Sie im Erfolg das ViewModel von MyViewModeljson gemäß dem Datenwert.
5.2. Konvertieren Sie ViewModel in JSON -Objekt
In dem oben genannten erwähnte, dass JSON -Objekte in ViewModel konvertiert werden. Was sollten wir also tun, wenn wir das ViewModel in JSON -Objekte umwandeln und an das Backend weitergeben müssen?
In Knockout sind zwei Methoden bereitgestellt:
• ko.tojs (): ViewModel in JSON -Objekt konvertieren
• Ko.tojson (): ViewModel in serialisierte JSON -String konvertieren.
Zum Beispiel ist unser Code wie folgt:
$ (function () {var ojson1 = ko.tojs (myviewModeljson); var ojson2 = ko. tojson (myviewModeljson);}); var myviewModeljson = {Deptname: ko.obserable ("r & d Department"), Deptlevel: Ko. Ko.Observable ("Entwicklungsgruppe")}; Ko.Applybindings (myviewModeljson);Überwachen wir dann die Werte von OJSON1 und OJSON2:
Code Zweifel: Durch das obige Bild ist es leicht, den Unterschied zwischen den beiden Methoden zu verstehen. Es ist hier zu beachten, dass diese beiden Methoden in KO eingebaut sind und die Unterstützung der Kartierungskomponente nicht erfordern.
6. Erstellen Sie Ihr eigenes Datenbindungsattribut
Ich habe über so viel darüber gesprochen und werde eine Bindung und Überwachung im Knockout einführen. Manchmal müssen wir also unsere Datenbindungen anpassen, wie z. Diese Anforderung ist besonders nützlich, wenn Komponenten eingekapselt werden. Kann es implementiert werden? Sicher.
In Knockout wird die Eigenschaft Ko.BindingHandlers bereitgestellt, um die Datenbindungseigenschaft anzupassen. Seine Syntax ist wie folgt:
Ko.BindingHandlers.MySelect = {init: function (Element, ValueAccessor, AllBindingsAccessor, ViewModel) {}, Update: Funktion (Element, ValueAccessor, AllBindingsAccessor, ViewModel) {}};Erklären Sie es einfach so, und dann können Sie in unserem HTML-Tag benutzerdefinierte Datenbindungen verwenden.
<div> <data-bind = "mySelect: $ root"> <option id = "1"> F & D-Abteilung </Option> <Option ID = "2"> Abteilung für menschliche Angelegenheiten </Option> <Option ID = "3"> Verwaltungsabteilung </Option> </select> </div>
MySelect ist unsere individuelle Bindungseigenschaft. $ root kann vorerst als Initialisierung verstanden werden (obwohl diese Erklärung nicht streng ist, wenn es eine vernünftigere Erklärung gibt, können Sie sie gerne korrigieren).
Code Zweifel: Die obigen Ko.BindingHandlers können verwendet werden, um einfach benutzerdefinierte Bindungseigenschaften zu implementieren. Zwei Punkte müssen erklärt werden:
• Initiziert, wie der Name schon sagt, die benutzerdefinierte Bindung initialisiert. Es enthält mehrere Parameter. Die ersten beiden Parameter werden im Allgemeinen häufiger verwendet. Der erste Parameter repräsentiert das DOM -Element, das die benutzerdefinierte Bindung initialisiert, und der zweite Parameter wird im Allgemeinen zum Übergeben der initialisierten Parameter verwendet.
• Aktualisieren Sie den Rückruf aktualisieren, wenn sich das entsprechende Überwachungsattribut ändert, wird diese Methode eingegeben. Wenn kein Rückruf erforderlich ist, kann diese Methode nicht deklariert werden.
Hier erklärt der Blogger kurz die Verwendung von benutzerdefinierten Bindungen basierend auf einer Dropdown-Box-Komponente, die er geteilt hatte.
6.1. Die einfachste Mutiselect
Wenn wir KO verwenden müssen, um einige allgemeine Komponenten zu verkapulieren, müssen wir im Allgemeinen unsere Ko.BindingHandlers verwenden. Der Blogger wird diskutieren, wie man es in Kombination mit der Mutiselect -Komponente verwendet.
Deklarieren Sie zuerst die angepassten Ko.BindingHandlers und initialisieren Sie unser SELECT -Tag in der Init -Methode
Ko.BindingHandlers.MySelect = {init: function (Element, ValueAccessor, AllBindingsAccessor, ViewModel) {$ (Element) .multiselect ();}, update: function (Element, ValueAcessor, AllBindingsAccessor, ViewModel) {}};Verwenden Sie es dann im Seiten -Tag
<div style = "text-align: center;"> <Data-Bind = "MySelect: $ root"> <Option ID = "1"> F & E-Abteilung </Option> <Option ID = "2"> Abteilung für Humanangelegenheiten </Option> <Option ID = "3"> Administratorabteilung </Option> </select> </div> </div> </div> </div>
Aktivieren Sie die Bindung des letzten dritten Teils
$ (function () {var multiselect = {}; ko.applybindings (multiselect);});Wenn Sie keine Parameter übergeben müssen, müssen Sie nur ein leeres ViewModel binden. Einige Leute sind verwirrt, aber der dritte Teil hat nicht das Gefühl, dass es praktisch ist. Das Verständnis des Bloggers ist, dass das DOM-Element Datenbindung verwenden muss, um Daten zu binden, und die KO-Bindung muss aktiviert werden, was ko.applybindings () hier ist.
Erhalten Sie den Effekt:
6.2. Parameterübergang
Der erste Schritt besteht darin, Ko.BindingHandlers anzupassen
Ko.BindingHandlers.MySelect = {init: function (Element, ValueAccessor, AllBindingsAccessor, ViewModel) {var oparam = ValuAraccessor (); $ (Element) .Multiselect (Oparam);Der zweite Schritt ist der gleiche wie oben. Verwenden Sie diese benutzerdefinierte Bindung im HTML -Tag.
Schritt 3: Übergeben Sie Parameter, wenn Sie die Bindung aktivieren
$ (function () {var multiselect = {EnableClickableOptGroups: TRUE, // Collapse -Gruppierung onchange: function (option, checked) {alert ("Änderung auswählen");}}; Ko.applybindings (Multiselect);});Durch diese drei Schritte können Sie die Parameter an die Initialisierung unserer Mutiselect übergeben:
Code -Abfragen: Der zweite Parameter des Init -Ereignisses, sagte wir, seine Hauptfunktion besteht darin, die von unserem ViewModel übertragenen Parameter zu erhalten. Wir müssen ihn jedoch als Methode verwenden. Warum bleibt es so viel zu untersuchen!
2. Das erste Beispiel für das Hinzufügen, Löschen, Ändern und Suchen
Zu diesem Zeitpunkt wurden endlich die grundlegenden Dinge angelegt. Ich hatte ursprünglich geplant, sie in einem Artikel zu vervollständigen, aber ich hatte nicht erwartet, dass die grundlegenden Dinge so sehr erweitert werden! Die Beispiele für das Hinzufügen, Löschen, Ändern und Überprüfen der nächsten Artikel sind im nächsten Artikel enthalten. Bootstrappable und KnockoutJs kombinieren die Funktion des Hinzufügens, Löschens, Änderns und Überprüfens [2]. Willkommen zu lernen und zu kommunizieren, und natürlich können Sie es auch gerne empfehlen!