Im vorherigen Artikel habe ich Ihnen die Kombination von Bootstrappable und KnockoutJs zur Implementierung der Additions-, Lösch-, Modifikations- und Suchfunktionen [1] vorgestellt und einige grundlegende Verwendungen von Knockout.js eingeführt. Als nächstes werden wir es Ihnen weiterhin in diesem Artikel vorstellen. Wenn Sie vorhaben, KO zu verwenden, um Projekte durchzuführen, werfen wir einen Blick darauf!
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. Vorschau des Effekts
Tatsächlich hat es keine Wirkung. Es ist nur eine einfache Ergänzung, Löschung, Änderung und Suche. Der Schlüssel befindet sich noch auf dem Code. Durch die Verwendung von KO kann eine Menge Schnittstellendom -Datenbindungsvorgänge gespeichert werden. Im Folgenden finden Sie den JS -Code für die gesamte Logik des Hinzufügens, Löschens, Änderns und Suchens:
Seiteneffekt:
2. Code Beispiele
Ok, lass uns auf den Punkt kommen! Der Blogger plant, es in zwei Teile vorzustellen. Der erste Teil ist der Tischinitialisierungsteil, und der zweite Teil ist der Taste -Betriebs-, Lösch- und Modifikationsteil.
1. Tabelle Initialisierung
1.1. Vorbereitung
Schauen Sie sich zunächst die JS- und CSS -Dateien an, auf die verwiesen werden müssen
<link href = "~/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-table/bootstrap-table.min src = "~/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.min src = "~/scripts/Knockout/Knockout-3.4.0.min.js"> </script> <script src = "~/scripts/Knockout/Extensions/Knockout.Mapping-latest.js"> </script> <script src = "~/content/bootstrap-table.boots.js src = "~/scripts/departy.js"> </script>
Sie werden alle häufig verwendete CSS- und JS -Dateien. Wir haben hauptsächlich zwei benutzerdefinierte JS -Dateien: Knockout.bootStrapTable.js und Department.js. Im vorherigen Artikel haben wir vorgestellt, dass die Verwendung von KO unsere Datenbindung anpassen kann. In ähnlicher Weise definieren wir für die Bindung der Tabelle auch eine benutzerdefinierte Bindung, Code in Knockout.bootStrapTable.js.
// KO benutzerdefinierte Bindung ko.BindingHandlers.MybootstrapTable = {init: function (Element, ValuaCocessor, AllBindingsAccessor, ViewModel) {// Das Oparam hier ist das gebundene ViewModelvar OviewModel = EvalaCessor (); var $ ele = $). bootstrapTable method to viewmodel oViewModel.bootstrapTable = function () {return $ele.bootstrapTable.apply($ele, arguments);}},update: function (element, valueAccessor, allBindingsAccessor, viewModel) {}};//Initialization (function ($) {//Add a bootstrapTableViewModel method to Ko.BootStrapTableViewModel = Funktion (Optionen) {var that = this; this.default = {Search: TRUE, // TABLE -Suchanlage ist eine Client -Suche und wird nicht den Server eingeben. MinimumCountColumns: 2, // Die minimale Anzahl der zulässigen Spalten klicken: true, wobei Klicken Sie auf Zeilenauswichte aus: true,}; arrres;}; // aktualisieren this.refresh = function () {that.bootStrapTable ("refresh");};};}) (jQuery);Code Zweifel: Diese JS -Datei macht hauptsächlich zwei Dinge
1. Passen Sie die mybootstrapsable von Data-Bind-Eigenschaft an. Für die Update -Methode in Ko.BindingHandlers.MybootStrapTable ist es nicht erforderlich, sie zu definieren.
2. Kapitulieren Sie das Bootstrappable, indem Sie dem KO -Objekt ein BootstrappableViewModel hinzufügen.
1.2. Starten Sie die Bindung des HTML -Tags
<table id = "tb_dept" data-bind = "mybootStrapTable: $ root"> <tr> <th data-Checkbox = "true"> </th> <th data-field Zeit </th> </tr> </teaad> </table>
Code Zweifel: Definieren Sie ein Tabellen -Tag und verwenden Sie eine benutzerdefinierte Bindung an myBootstrapTable. Wie im vorherigen Artikel erwähnt, kann $ root als Bedeutung der Initialisierung verstanden werden. Der Einfachheit halber sind alle Spalten direkt in <Th> geschrieben.
1.3. Aktivieren Sie die Bindung von KO
Starten Sie nach dem Laden der Seite die Bindung von KO:
//Initialize $(function () {//1, Init table tableInit.Init();//2, Register the add-on, deletion and modification event operating.operateInit();});//Initialize table var tableInit = {Init: function () {//Binding table viewmodelthis.myViewModel = new ko.bootstrapTableViewModel({url: '/Abteilung/getDepartment', // URL (*) -Methode: 'Get', // Anforderungsmethode (*) Symbollbar: '#toolbar', // Welcher Container wird für die Tool -Taste verwendet Queryparams: Funktion (Param) {return {limit: param.limit, offset: param.offset}; Sidepagination: "Server", // Paginierungsmethode: Client -Client -Pagination, Server -Server -Pagination (*) Pagenumber: 1, // Initialisieren Sie die erste Seite, um zu laden, standardmäßig erste Seite PageSize: 10, // Anzahl der Datensatzzeilen pro Seite (*) Pagelist: [10, 25, 50, 100], Nummer von Reihen pro Seite, um die Reihen pro Seite auszuwählen, um auszuwählen. (*)};CODE -Zweifel: Nachdem die Seite geladen wurde, rufen Sie das oben eingekapselte BootStrapTableViewModel -Objekt auf, um die übergebenen Parameter zu verschmelzen, und aktivieren schließlich die Bindung und aktivieren Sie dies. Der Debugging -Code zeigt, dass die Ko.Applybindings (this.myviewModel, document.getElementById ("Tb_dept")); wird ausgeführt; Die benutzerdefinierte Bindung wird wirksam und das Programm wird in die Init -Methode der Ko.BindingHandlers.MyBootstrapTable -Objekt zur Initialisierung von Bootstrappable eingetragen. Hier ist ein Punkt zu erklären:
Init: Funktion (Element, ValueAccessor, AllBindingsAccessor, ViewModel) {// Das Oparam hier ist das gebundene ViewModelvar OviewModel = ValuAccessor (); var $ ele = $ (Element). $ ele.bootStrapTable.Apply ($ ele, Argumente);}}In der obigen Init -Methode erhalten wir über den zweiten Parameter ValueAccessor das derzeit gebundene ViewModel, das Objekt davon ist. MyViewModel oben. Der Blogger ist der Meinung, dass dies für Ihr Verständnis der Logik der benutzerdefinierten Bindung förderlich ist. Grundsätzlich, wenn wir diesen Satz ausführen, var $ ele = $ (Element). Der Blogger definiert eine Sammlung für die entsprechende Methode im Hintergrund. Aus Vollständigkeit werde ich es hier veröffentlichen:
Abteilungskontroller
2. Knopfbetrieb
Die oben genannten ist die Verwendung unserer benutzerdefinierten Datenbindung durch die Initialisierung von Bootstrappable. Lassen Sie uns den "Shuangweiwai" mithilfe der folgenden Schaltflächenoperation erleben.
2.1. Seite anzeigen
Definieren Sie zunächst unsere add-on-Deletion-Schaltfläche auf der Ansichtsseite
<div id = "Symbolleiste"> <button id = "btn_add" type = "button"> <span aria-hidden = "true"> </span> add </button> <button id = "btn_edit" type = "button"> <span aria-hidden = "true"> </span> </button> <button id = "btn_delete" "type". aria-hidden = "true"> </span> löschen </button> </div>
Der Einfachheit halber verwendete der Blogger ein verstecktes Pop-up-Box, um neu hinzugefügte und bearbeitete Textfelder zu enthalten. Im Allgemeinen können Sie hier im Allgemeinen teilweise Ansichten verwenden, und es gibt möglicherweise eine edit.cshtml in Ihrem Projekt, aber hier setzt der Blogger diese auf eine Seite, da dies nicht im Mittelpunkt des Textes steht.
<div id = "myModal" tabindex = "-1" rollen = "dialog" aria-labelledBy = "myModallabel"> <div rollen = "document"> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span arria-hidden = "true" × × × ach. id = "myModallabel"> Operation </h4> </div> <div> <label for = "txt_departmentname for = "txt_departmentlevel"> Abteilungsstufe </label> <Eingabe type = "text" name = "txt_departmentlevel" data-bind = "Wert: Ebene" id = "txt_departmentlevel" placeholder = "Abteilungslevel"> </div> <label für = "txt_des"> Beschreibung "> </label </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</Eingabe" = "text" text "text" text "text" text data-bind = "value: Des" id = "txt_des" placeholder = "Beschreibung"> </div> </div> <div> <button type aria-hidden = "true"> </span> speichern </button> </div> </div> </div>
2.2. JS -Initialisierungstaste Operation
// Operation var Operation = {// Taste initialisieren operiTInit: function () {this.operateadd (); this.operateUpdate (); this.operatedelete (); ko.observable()};},//Add operationAdd: function(){$('#btn_add').on("click", function () {$("#myModal").modal().on("shown.bs.modal", function () {var oEmptyModel = {id: ko.observable(),Name: Ko.OBServable (), Level: Ko.Observable (), Des: Ko.Observable (), Createtime: Ko.Observable ()}; Ko.utils.extend (Operation.DepartmentModel, OemptyModel); KO.ApplyBinding (Operation.DepartmentModel, Operation.DepartmentModel, document.getElementById ("myModal")); operatesaveSave ();}). on ('hidden.bs.modal', function () {ko.Cleannode (document.getElementById ("myModal");});});}); {$ ('#btn_edit'). on ("click", function () {$ ("#myModal"). modal (). on ("gezeigt.bs.modal", function () {var arrrectedData = tableInit.myviewModel.getSelections (); von Daten zu ViewModelko.utils.Extend (Operation.DepartmentModel, Ko.Mapping.Fromjs (ArrratecrectedData [0]); Ko.Applybindings (Operation.Departmentmodel, Dokument, Dokument. {// Die Bindung löschen beim Schließen des Popup-Box (dies ist klar, dass das Bindung und das Löschen des Registrierungsereignisses das Löschen des Registrierungsereignisses) Ko.Cleannode (Dokument.GetElementById ("myModal");});});});});}); arrrectedData = tableInit.myviewModel.getSelections (); {alert (status); // tableinit.myviewModel.refresh ();}});});});}, // Daten speichern: function () {$ ('#btn_submit'). on ("klicks", function () {// Fetchmodelvar -ovarvar -ovartemodel ViewModel to Data ModelVar Odatamodel = Ko.tojs (OviewModel); var funcname = odatamodel.id?update" {alert (status); tableInit.myviewModel.refresh ();}});});});}, // Datenüberprüfung operatecheck: function (arr) {if (arr.Length <= 0) {alert aus. false;} true;}}Code -Skepsis: Erzählen Sie uns hier von der Ausführungslogik. Zunächst rufen Sie Operator.operateInit (); In der Methode $ (function () {}). Registrieren Sie in der Methode Operatorinit () das Klickenereignis der Schaltfläche auf der Seite und definieren Sie dies auch als neu bearbeitete ViewModel. Dieses ViewModel definiert die Überwachungsattribute, die den Seitenelementen entsprechen. Erinnern Sie sich noch an einige Datenbindungen in der oben versteckten Popup-Box? Ja, der entsprechende Wertwert darin entspricht den hier die Überwachungsattribute. Nach der Einstellung der Bindung werden alle Überwachungsänderungen in JS geführt, die dazu führen. Abteilungsmodel löst den Wert der Bindungs -Tags an der Schnittstelle aus. Im Gegenteil, die Änderung des Wertwerts aller Tags an der Schnittstelle führt zwangsläufig zu der Änderung der Überwachungsattributwerte. Dies ist die sogenannte Zwei-Wege-Bindung. Werfen wir einen Blick auf die Ausführung der bow-Wege-Bindung im Detail.
2.3. Neue Operationen
$ ('#btn_add'). on ("click", function () {$ ("#myModal"). modal (). on ("gezeigt. Ko.OBServable (), CreateTime: Ko.OBServable ()}; Ko.utils.extend (operation.DepartmentModel, OemptyModel); Ko.Applybindings (operation.Departmentmodel, document.getElementById ("mymodal"). () {Ko.Cleannode (document.getElementById ("myModal");});});Wenn unsere Schnittstelle einen neuen Betrieb auslöst, wird zuerst die oben erwähnte versteckte Modalbox angezeigt. Wenn das Modalbox angezeigt wird, definieren Sie zuerst ein leeres ViewModel und rufen Sie dann Ko.utils.Extend auf (operation.abpartmentmodel, OemptyModel); Dieser Satz überschreibt das globale Betrieb. AbteilungModel durch das leere ViewModel. Die Funktion der Ko.utils.extend () -Methode ähnelt der Funktion von $ .extend () in JQuery. Beide vorherigen Objekte werden basierend auf den nachfolgenden Objekten zusammengeführt, und nach der Zusammenführung wird die Bindung mit dem neuen ViewModel aktiviert. Registrieren Sie nach Aktivierung der Bindung den Klickereignis der Schaltfläche Speichern. Beim Hinzufügen taucht eine Modalbox auf. Da die Überwachungsattribute im ViewModel alle leer sind, wird auch der Wert des entsprechenden Grenzflächenelements gelöscht, sodass wir dies im neuen Zusatz sehen:
Wenn die Popup-Box geschlossen ist, führen wir Ko.Cleannode (Dokument.GetElementById ("myModal") aus; Durch das geschlossene Ereignis. Dieser Satz ist sehr wichtig, da KO für dasselbe DOM nur einmal gebunden werden kann. Wenn Sie erneut binden müssen, müssen Sie zuerst die Bindung löschen. Darüber hinaus löscht die CleanNode () -Methode nicht nur die Bindung, sondern auch die im DOM registrierten Ereignisse. Sie müssen aufpassen, wenn Sie es verwenden!
2.4. Bearbeitungsvorgänge
$ ('#btn_edit'). on ("click", function () {$ ("#myModal"). modal (). on ("gezeigt.bs.modal", function () {var arrrectedData = tableInit.myviewModel.getSelections (); mit Datenmodell zu ViewModelko.utils.Extend (operation.DepartmentModel, ko.mapping.fromjs (arrrectedData [0]); Ko.Applybindings (Operation.Departmentmodel, Dokument, Dokument. {// Löschen Sie die Bindung beim Schließen des Pop-up-Box (dies klare Entfernen der Bindung und Löschen des Registrierungsereignisses) Ko.Cleannode (Dokument.GetElementById ("myModal");});});}) ;;Wenn wir den Bearbeitungsvorgang auslösen, wird die Schnittstelle immer noch auftaucht. Im Popup-Ereignis des Popup-Felds nehmen wir die aktuell ausgewählte Zeile und überprüfen dann, ob eine Zeile ausgewählt ist. Es ist am besten, gewöhnliche JSON -Objekte in ViewModel mit Überwachungsattributen durch den Satz ko.Mapping.fromjs (ArrrectedData [0]) umzuwandeln. Wie im vorherigen Artikel erwähnt, erfordert diese Methode die Unterstützung der JS-Datei knockout.mapping-latest.js. Nach der Konvertierung wird das ViewModel immer noch über die Ko.utils.extend () -Methode aktualisiert und dann die Bindung aktiviert. Da das ViewModel durch die Daten der aktuell ausgewählten Zeile aktualisiert wird, ist das Ergebnis:
2.5. Betrieb speichern
Klicken Sie nach dem Hinzufügen und Bearbeiten von Popup-Boxen auf Speichern, nachdem Sie die relevanten Informationen geändert haben, und das Speichernereignis wird ausgelöst.
$ ('#btn_submit'). on ("click", function () {// Das aktuelle ViewModelvar oviewModel = operating.departmentmodel; // das ViewModel in Data ModelVar Odatamodel = ko.tojs (OviewModel) konvertieren; odatamodel.id?ooldate"Wenn das Save -Ereignis ausgelöst wird, erhalten wir zunächst das ViewModel an die Seite, dh das Betrieb. Diese Methode ist in KO integriert und erfordert keine andere JS-Unterstützung. Senden Sie nach Erhalt des JSON -Objekts eine AJAX -Anforderung, um Daten hinzuzufügen oder zu bearbeiten. Dies spiegelt eine bid- und bindende Bindung wider. Nach dem Wert aller Textfelder in der Schnittstelle ändert sich auch die Änderung des Betriebs. Abteilungsmodel wird ebenfalls ausgelöst.
2.6. Betrieb löschen
Über den Löschvorgang gibt es nichts zu sagen und hat nichts mit KO zu tun.
3. Zusammenfassung
Das obige führt die gemeinsame Verwendung von KO und Bootstrappable durch eine einfache Addition, Löschung, Änderung und Suchoperation ein. KO kann Sie vom DOM befreien und sich auf ViewModel konzentrieren. Wenn Sie sich den gesamten JS -Code ansehen, können Sie kaum JQuery's Val (), Text () und andere Vorgänge sehen, um der Schnittstelle DOM Werte zu erhalten und zuzuweisen. Sieht es sauber und erfrischend aus und High-End? Dies kann natürlich nur einige der grundlegenderen Verwendungen von KO sein. Schließlich lernen Blogger nur 3 Tage lang KO, und fortgeschrittenere Verwendung müssen untersucht werden. Wenn Sie sich in einiger Zeit daran gewöhnen, werden Sie einige seiner fortgeschrittenen Verwendungen mit allen teilen. Wenn Sie der Meinung sind, dass dieser Artikel Ihnen helfen kann, das Prinzip von KO und seiner Verwendung zu verstehen, können Sie ihn auch empfehlen. Der Herausgeber ist hier dankbar!
Das obige ist der gesamte Inhalt der Kombination von Bootstrappable und KnockoutJs, um die Funktion, Löschung, Änderung und Suchfunktion zu implementieren [2]. Ich hoffe, es wird für alle hilfreich sein!