Vorwort: Der Blogger hat zuvor einige grundlegende Verwendungen von KnockoutJs und Bootstrappable geteilt. Sie sind alle grundlegende Anwendungen und sind überhaupt nicht verkapselt. Sie vermeiden nur den Wert und die Zuordnung von HTML -Kontrollen und sind weit davon entfernt, die Exquisität von MVVM zu zeigen. Vor kurzem plant das Projekt, KO offiziell zu verwenden, so dass es einige Verpackungen für KO und Bootstrappable gemacht hat und hier als Referenz von Parkfreunden geteilt wird. Für Verpackungsideen finden Sie im Blog Park Master Xiao Qin. Wenn die Parkfreunde einen besseren Weg haben, können Sie sich gerne darüber besprechen.
Artikel der Knockoutjs -Serie:
Bootstrappable und KnockoutJs kombinieren die Funktion des Hinzufügens, Löschens, Modifizierens und Überprüfens [1]
Bootstrappable und KnockoutJs kombinieren die Funktion des Hinzufügens, Löschens, Änderns und Überprüfens [2]
1. Das erste ViewModel behandelt die Abfrage
Die Implementierung der Demo soll die Funktion des Abteilungsmanagements des letzten Mals fortsetzen. Die folgende Erweiterung erklärt durch den Datenfluss.
1. Der Hintergrund gibt die Implementierung von ViewModel in die Ansicht zurück
public actionResult index () {var model = new {tableParams = new {url = "/department/getDepartment", // pageSize = 2,}, urls = new {delete = "/departy/delete", edit = "/department/edit", add = "/department",}, querycondition = new {name = ",", "},}, querycondition = new {name =", ","},},}, {{{{{name = ",", "},}, querycondition = new {name =", "", "},}, {}, {}, {}, {}, {}, {}, {}, {}; View (Modell);}Code Zweifel: Das hier zurückgegebene Modell enthält drei Optionen
• TABLEPARAMS: Seitentabelle -Initialisierungsparameter. Da die Standardparameter in JS definiert sind, sind die hier festgelegten Parameter die page-spezifischen Initialisierungsparameter.
• URLs: Der URL -Pfad, der die Anforderung zur Addition, Löschung und Änderung enthält.
• QueryCondition: Die Abfragebedingungen der Seite.
2. CSHTML -Seitencode
Der Seitencode index.cshtml lautet wie folgt:
@{Layout = null;} <! DocType html> <html> <kopf> <meta name = "viewPort" content = "width = Gerätebidth"/> <title> Index </title> <link href = "~/content/bootstrap/css/bootstrap.Min.css" rel = " href = "~/content/bootstrap-table/bootstrap-table src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap-table/local/bootstrap-table-zh-cn.js"> </script src = "~/scripts/Knockout/Knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout src = "~/scripts/extensions/knockout.bootStrapTable.js"> </script> <script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeObject (model); document.getElementById ("div_index"));}); </script> </head> <body> <div id = "div_index" style = "padding: 0px; Überlauf-x: Hidden; data-bind = "value: queryCondition.name"> </div> <label> Abteilungsbeschreibung </Label> <div> <Eingabe type = "text" data-bind = "Wert: queryCondition.des"> </div> <div style = "text-Align: rechts; type = "button" data-bind = "klicken: queryclick"> Abfrage </button> </div> </form> </div> </div> <div id = "Symbolleiste"> <button data-bind = "klicken: addClick" Typ "type"> <span arkaria-versteckt = "true"> </span> addClick </button </button </button> button> button> button> <button> <button> <button> <button> <button-data-bind. aria-hidden = "true"> </span> modifizieren Sie </button> <button data-bind = "klicken: deleteClick" type = "button"> <span aria-hidden = "true"> </span> löschen </button> </div> <table data-bind = "bootstreaptable: bootstraptable"> </thda-that-daten-daten- data "thathE-daten- data" thatheck = "thdaten". Name </th> <th data-field = "stufe"> Abteilungsstufe </th> <th data-field = "Des"> Beschreibung </th> <th data-field = "StrCreateTime"> Erstellungszeit </th> </tr> </tead> </table> </div> </body> </html> </tr> </tead> </table> </body> </html>> </table> </by> </html>Code Zweifel: Wie im vorherigen Artikel müssen Sie JQuery, Bootstrap, Bootstrappable, Knockout und andere verwandte Dateien zitieren. Hier sind die folgenden zwei Dokumente:
• Knockout.index.js: Kapuliert die Eigenschaften und Ereignisbindungen, die sich auf die Abfrageseite beziehen.
• Knockout.bootStrapTable.js: Kapuliert die Initialisierung von Bootstrappable und passt die Knockout -Bindungsmethoden an.
Alle oben genannten Seiteninteraktionen sind in öffentlicher JS eingekapselt. Daher müssen keine große Anzahl von doppelten Codes wie DOM -Elemente geschrieben werden, um Zuweisungen, Ereignisbindung usw. auf der Seite zu erhalten. Es sind nur die oben genannten zwei Sätze von JS auf dieser Seite geschrieben. Ist es nicht sehr einfach?
3. Js Kapselung
Werfen wir einen Blick auf die beiden oben genannten JS -Dateien.
(1) Knockout.bootStrapTable.js
(function ($) {//Add a bootstrapTableViewModel method to ko.bootstrapTableViewModel = function (options) {var that = this;this.default = {toolbar: '#toolbar', //Which container for tool button queryParams: function (param) {return { limit: param.limit, offset: param.offset };},//Pagination Parameter (*) Pagination: TRUE, // Paginierende Anzeige (*) Sidepagination: "Server", // Pagination Methode: Client -Pagination, Server -Server -Pagination (*) Pagenumber: 1, // Initialisieren Sie die erste Seite, um die erste Seite zu laden: 10, // Die Anzahl der Reihen, die per Seite (*) Pagelist (*) pagelist. Um ausgewählt zu werden (*) Methode: 'Get', Search: True, // wird die Tabellensuche angezeigt? ClickToSelect: TRUE, // Ist das Klicken, um Zeilen auszuwählen. () {that.bootStrapTable ("refresh");};}; // KO Custom Binding Ko.BindingHandlers.bootStrapTable = {init: Funktion (Element, ValueAccessor, AllbindingsAccessor, ViewModel) {// Die Oparam hier ist das gebundene ViewModelvar = Evar = Evar = Evar = Ovarvar = Evar = Evar = Evar = Evar = Evar = Evar. $ (Element) .BootstrapTable (OviewModel.Params); // Fügen Sie der ViewModel OviewModel.bootStrapTable = function () {return {}};}) (jQuery);Code Zweifel: Der obige Code macht hauptsächlich zwei Dinge
1. Customized ViewModel durch Bootstrappable initialisiert.
2.
Fügen Sie KO -benutzerdefinierte Bindungen hinzu.
Wenn die Parkfreunde die Verwendung einer benutzerdefinierten Bindung nicht verstehen, können Sie sich die ersten beiden Blog -Beiträge des Bloggers (eins) und (zwei) für eine detaillierte Einführung ansehen.
(2) Knockout.index.js
(Funktion ($) {Ko.BindingViewModel = Funktion (Daten, Bindelement) {var self = this; this.QueryCondition = Ko.Mapping.fromjs (data.QueryCondition); this.defaultQueryparams = {QueryParams: Funktion (params). = param.offset; return params;}}; var tableParams = $ .extend ({}, this.defaultQueryparams, data.tableParams || {}); this.bootStrapTable = new Ko.bootStableTableViewModel (tableParams); //con -Ereignis. (Schlüssel, Wert) {// Clear if (typeof (value) == "Funktion") {this (''); $ ('<div id = "myModal" tabIndex = "-1" rollen = "dialog" aria-labelledBy = "myModallabel"> </div>'); Dialog.load (data.urls.edit, null, function () {}); $ ("Body"). Append. {// 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 enthält) Ko.Cleannode (Dokument.GetElementById ("formEdit"); Dialog.remove (); self.bootStrapTable.refresh ();};};};}; self.bootStrapTable.getSelections (); if (arrrectedData.Length <= 0 || arrrectedData.length> 1) {alert ("Nur eine Zeile zu einem Zeitpunkt bearbeiten");} var var dialog = $ ('<div id = "myModal" tabindex = "-1" rollen = "rollen =" Dialog "dialog" dialog "dialog" dialog "dialog" dialog "myModal" tabindex = "-1" dialog "dialog" dialog "$" dialog "dialog" $ "dialog" myModal "tabindex ="-1 "dialog" dialog "$" dialog "dialog" $ "dialog" dialog "$" dialog "myModal" tabindex = "-1" dialog ". aria-labelledBy = "myModallabel"> </div> '); dialog.load (data.urls.edit, arrrectedData [0], function () {}); Bindung und Löschen des Registrierungsereignisses) Ko.Cleannode (document.getElementById ("formedit"); dialog.remove (); self.bootStrapTable.refresh ();});}; // Ereignis löschen theletelaTable (! arrrectedData || arrrectedData.length <= 0) {alert ("Bitte mindestens eine Zeile auswählen");} $. {alert (Status); self.bootStrapTable.refresh ();}});}; ko.applybindings (self, bindelement);};}) (jQuery);Code Zweifel: Dies ist hauptsächlich die Attribute und die Ereignisbindung von Seitenelementen und an mehrere Orte zusammengefasst, die erklärt werden müssen
• this.QueryCondition = ko.Mapping.fromjs (Data.QueryCondition): Der Zweck dieses Satzes besteht darin, die vom Hintergrund vom Hintergrund von JSON -Daten übergaben Abfragebedingungen in die Überwachungsattribute zu konvertieren. Nur durch Ausführen dieses Satzes können Attribute und Seitenelemente in beide Richtungen überwacht werden.
• self.bootStrapTable.refresh (): Die Bedeutung dieses Satzes besteht darin, die Tabellendaten zu aktualisieren. Es ist eigentlich die Aktualisierungsmethode von Bootstrappable, die aufgerufen wird, aber der Blogger ist einfach in der Datei knockout.bootStrapTable.js.
• Dialog.load (data.urls.edit, null, function () {}): Beim Hinzufügen und Bearbeiten wird die LOAD () -Methode von JQuery verwendet. Die Funktion dieser Methode besteht darin, die Seitenelemente dieser URL anzufordern und den JS -Code der entsprechenden Seite der URL auszuführen. Diese Methode ist sehr leistungsfähig, wenn sie sich dynamisch auf die JS -Datei bezieht und den Code in der JS -Datei ausführt.
Fügen Sie schließlich den Code bei, der der Methode des Hintergrund -Abpartments () entspricht
[Httpget] public JsonResult getDepartment (int limit, int offset, String -Name, String Des) {var lstres = maperyModel.getData (); if (! String.IsnullOmpty (Name)) {lstres = lstres.where (x => x.name.contain . lstres.skip (offset) .take (limit) .tolist (), Total = lstres.count}; return JSON (Ores, jsonRequestBehavior.AllowGet);}An diesem Punkt können die Abfragungs- und Löschfunktionen der Abfrageseite realisiert werden.
Haben Sie noch eine Frage: Was ist, wenn wir die Ereignisse von Bootstrappable anpassen müssen? Kann nicht im Hintergrund durch das ViewModel übertragen werden, oder?
In der Tat kann die JS -Ereignismethode nicht aus dem Hintergrund übergeben werden. Daher müssen wir die Verarbeitungsmethode des Ereignisses im vorderen Ende anpassen, beispielsweise können wir dies tun:
<script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonConvert.SerializeObject (Modell)); data.tableParams.OnloadSuccess = Funktion (Data) {alert ("loadsuccess Ereignis");}; document.getElementById ("div_index"));}); </script>2. Holen Sie sich die zweite ViewModel -Bearbeitung
Eines der ViewModels über dem Überblick über die Abfrage- und Löschfunktionen, aber das Hinzufügen und Bearbeiten erfordert auch die Unterstützung eines anderen ViewModel. Schauen wir uns die Paketimplementierung der Bearbeitung an.
1. Implementierung von ActionResult
Über die obige Code -Abfrage können wir wissen, dass wenn der Benutzer auf Hinzufügen und Bearbeiten klickt, eine andere Ansichtsansicht →/Abteilung/Bearbeiten angefordert wird. Schauen wir uns die Implementierung der Bearbeitungsansicht an
public actionResult edit (Abteilungsmodell) {var oresmodel = new {editModel = modell, urls = new {subled = model.id == 0? "/Department/Add": "/Abteilung/Update"}}; Rückgabeansicht (Oresmodel);}Code Zweifel: Der obige Code ist sehr einfach, weshalb ein ViewModel an die Ansichtsseite zurückgibt, die die bearbeitete Entität und die eingereichte URL enthält. Unabhängig davon, ob dieser Primärschlüssel vorhanden ist, wird festgelegt, ob das aktuelle Commit eine neue Entität oder eine Bearbeitungseinheit ist.
2. CSHTML -Code
Edit.cshtml Code ist wie folgt:
<form id="formEdit"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Operation</h4></div><div><div><label for = "txt_departmentname"> Abteilungsname </Label> <Eingabe type = "text" name = "txt_departmentname data-bind="value:editModel.Level" placeholder="Department Level"></div><div><label for="txt_des">Description</label><input type="text" name="txt_des" data-bind="value:editModel.Des" placeholder="Descriptive"></div><div><button type="button" data-dismiss="modal"><span aria-hidden = "true"> </span> schließen </button> <button type = "subieren"> <span aria-hidden = "true"> </span> speichern </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.csssSs. src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extrensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ () () {) {var EditData = @Html.raw (newtonsoft.json.jsonconvert.SerializeObject (Modell)); Ko.BindingDitViewModel (editData, {});CODE -Zweifel: Da wir den Bootstrapvalidator der Verifizierungskomponente hinzugefügt haben, müssen wir auf die relevanten JS und CSS verweisen. Diese Datei knockout.edit.js fasst hauptsächlich die Eigenschaften und die Ereignisbindung der Bearbeitungsseite zusammen. Schauen wir uns den Implementierungscode dieses JS an.
3. Js Kapselung
Knockout.Edit.js Code:
(function ($) {ko.bindingEditViewModel = function (data, validatorFields) {var that = {}; that.editModel = ko.mapping.fromJS(data.editModel); that.default = {message: 'Verification failed',fields: { },submitHandler: function (validator, form, submitButton) {var arrrectedData = ko.tojs (that.editModel); {alert (status);}}); $ ("#myModal"). modal ("hide");}}; document.getElementById ("formedit"));};}) (jQuery);Code Zweifel: Dies ist hauptsächlich die Eigenschaften des Bearbeitungsmodells und die eingereichte Ereignisbindung zusammen. Da die Bootstrapvalidator -Überprüfungskomponente verwendet wird, ist die Einreichung von Formularvorschriften erforderlich. Tatsächlich sollte Page ID nicht in öffentlichen JS wie "Formedit" und "MyModal" oben erscheinen. Dies kann als Parameter übergeben werden, der optimiert werden muss. Die Parameter -Validatorfields repräsentieren das Bestätigungsfeld der Verifizierungskomponente. Wenn das Formular keine Überprüfung erfordert, ist es in Ordnung, einen leeren JSON zu übergeben oder nicht. Wir haben im obigen Artikel keine Feldüberprüfung durchgeführt. In der Tat wird in der Grundtabelle im Allgemeinen ein oder mehrere nicht leere Felder wie die nicht leere Überprüfung der Abteilungsnamen enthalten. Der Code auf der Seite Edit.cshtml wird darauf geändert:
<form id = "formEdit"> <div rollen = "document"> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4 id = "mymodallabel"> apital </h4> </divaL> </divil> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</Dies " Name </label> <Eingabe type = "text" name = "name" data-bind = "Wert: editModel.Name" placeholder = "Abteilungsname"> </div> <div> <label für = "txt_departmentlevel"> Abteilungslevel </label> <Eingabe type = "text for = "txt_des"> Beschreibung </label> <Eingabe type = "text" name = "des" data-bind = "Wert: editModel.des" placeholder = "Des"> </div> <button type = "button" data-dismiss = "modal"> <span aria-hidden = "true"> </span> </button> </button aria-hidden = "true"> </span> speichern </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.css" rel = "styleSheet"/> <script src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extrensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ () () {) {var EditData = @Html.raw (newtonsoft.json.jsonconvert.SerializeObject (Modell)); Ko.BindingEditViewModel (editData, {name: {validators: {Notimpty: {Nachricht: 'Der Name kann nicht leer sein!'}}});Dann wird es automatisch überprüft, wenn Sie einreichen:
HINWEIS: Der Name des Überprüfungsattributs entspricht dem Namensattribut des Eingabetags. Um die Überprüfung durchzuführen, muss dieses Namensattribut korrekt festgelegt werden.
Es ist am besten, eine Hintergrundmethode zum Hinzufügen, Löschen und Ändern einer Hintergrundmethode anzuhängen:
[Httppost] public JsonResult add (Abteilung odata) {DepartmentModel.Add (odata); return JSON (neu {}, jsonRequestBehavior.AwGet);} [httppost] public jsonResult -Update (Abteilung Odata) {Departmentmodel (Odata); JsonRequestBehavior.AllowGet);} [httppost] public JSonResult delete (list <abteilung> odata) {DepartmentModel.delete (odata); return JSON (neu {}, jsonRequestBehavior.AllowGet);}Zu diesem Zeitpunkt ist der Effekt des Hinzufügens, Löschens, Änderns und Überprüfens der gesamten Seite in Ordnung. Schauen wir uns den Effekt kurz an:
3. Zusammenfassung
Das obige Kapitalabschluss, Lösch-, Modifikations- und Suchdienst von Bootstrappable+KO, das nur ein Primärpaket ist. Wenn Sie diese auf Ihr Projekt anwenden müssen, benötigen Sie möglicherweise auch einige einfache Optimierungsmaßnahmen wie:
1. Wenn es sich einfach um ein ViewModel einer Seite handelt, kann es besser sein, sie direkt in die Ansichtsseite zu schreiben, ohne sie aus dem ActionResult im Hintergrund zurückzugeben, und es speichert das Problem der Serialisierung und des Parameters. Dies muss optimiert werden.
2. Die ID des Seitenelements sollte nicht in öffentlichen JS erscheinen. Das Seitenelement kann über Parameter übergeben werden.
3. Fügen Sie Ereignismethoden hinzu und bearbeiten Sie es, um viele doppelte Code im Popup-Box zu haben. Der beste Weg, um diesen Teil zu tun, besteht darin, das Popup-Box in eine separate Komponente zu integrieren, um es aufzurufen, wodurch der größte Teil des JS-Codes reduziert werden kann.
4. Wenn es in den Abfragebedingungen und bearbeiteten Eigenschaften ausgewählte Dropdown-Box-Elemente gibt, müssen Sie möglicherweise auch die DataSource und andere Attribute des Dropdown-Felds zusammenfassen. Dieser Teil ist sehr häufig. Nachdem der Blogger die Demo geklärt hat, fügen Sie dieses Stück hinzu.
Die oben genannte Lösung für die vom Editor eingeführten Bootstrappable + KnockoutJs, um die Addition, Löschung, Änderung und Suche zu erreichen (3) Die beiden ViewModels haben die Hinzufügung, Löschung, Änderung und Suche abgeschlossen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!