Dans l'article précédent, je vous ai présenté la combinaison de bootstaptables et knockoutjs pour implémenter les fonctions d'addition, de suppression, de modification et de recherche [1], et j'ai introduit des usages de base de knockout.js. Ensuite, nous continuerons à vous le présenter via cet article. Si vous prévoyez d'utiliser KO pour faire des projets, jetons un coup d'œil!
Bootstrap est un cadre frontal, une bonne chose pour la libération de développeurs Web. Il montre que l'interface utilisateur est très haut de gamme, atmosphérique et haut de gamme. En théorie, vous n'avez pas besoin d'écrire une ligne de CSS. Ajoutez simplement les attributs appropriés à la balise.
Knockoutjs est un framework MVVM implémenté par JavaScript. Très bien. Par exemple, après avoir ajouté ou diminué les éléments de données de liste, il n'est pas nécessaire de rafraîchir l'ensemble du fragment de contrôle ou d'écrire des nœuds JS et de suppression par vous-même. Définissez simplement le modèle et les attributs qui répondent à ses définitions de syntaxe. Autrement dit, nous avons seulement besoin de prêter attention à l'accès aux données.
1. Aperçu de l'effet
En fait, cela n'a aucun effet. C'est juste un simple ajout, suppression, modification et recherche. La clé est toujours sur le code. L'utilisation de KO peut enregistrer beaucoup d'opérations de liaison de données DOM d'interface. Vous trouverez ci-dessous le code JS pour toute la logique de l'ajout, de la suppression, de la modification et de la recherche:
Effet de la page:
2. Exemples de code
Ok, allons-y! Le blogueur prévoit de le présenter en deux parties. La première partie est la pièce d'initialisation du tableau, et la deuxième partie est la partie de la suppression, de la suppression et de la modification de l'opération de bouton.
1. Initialisation du tableau
1.1. Préparation
Regardez d'abord les fichiers JS et CSS qui doivent être référencés
<link href = "~ / contenu / bootstrap / css / bootstrap.min.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap-table / bootstrap-table.min.css" rel = "Stylesheet" /> <script src = "~ / scripts / jquery-1.9.1.Min. src = "~ / contenu / bootstrap / js / bootstrap.min.js"> </ script> <script src = "~ / contenu / bootstrap-table / bootstrap-table.min.js"> </ script> <script src = "~ / content / bootstrap-Table / Locale / bootstrap-Table-Zh-Cn.js"> </ Script> src = "~ / scripts / knockout / knockout-3.4.0.min.js"> </ script> <script src = "~ / scripts / knockout / extensions / knockout.mapping-latest.js"> </ script> <script src = "~ / contenu / script> src = "~ / scripts / département.js"> </ script>
Ils sont tous des fichiers CSS et JS couramment utilisés. Nous avons principalement deux fichiers JS personnalisés: knockout.bootstraptable.js et département.js. Dans l'article précédent, nous avons présenté que l'utilisation de KO peut personnaliser notre discours de données. De même, pour la liaison de la table, nous définissons également un code de liaison personnalisé à l'intérieur de knockout.bootstraptable.js.
// Ajouter KO Custom Binding ko.bindinghandlers.mybootstraptable = {init: function (élément, ValueAccessor, AllBindingsAccessor, ViewModel) {// L'OPARAM ici est le lié ViewModelvar oviewModel = Valueaccessor (); Var $ ele = $). Méthode bootstraptable à ViewModel oviewModel.bootStrapable = function () {return $ ele.bootstraptable.apply ($ ele, arguments);}}, update: function (élément, valaccessor, allbindingsaccessor, ViewModel) {}}; // Initization (function ($) {// ajouter un boottrepiewMoDMODM ko.bootstraptableViewModel = fonction (options) {var that = this; this.default = {search: true, // à afficher la recherche de table? MinimumCountColumns: 2, // Le nombre minimum de colonnes autorisées clicktoselect: true, // où activer cliquez sur la ligne showToggle: true,}; arrres;}; // rafraîchir this.refresh = function () {that.bootStrapable ("rafraîchir");};};}) (jQuery);Doute de code: ce fichier JS fait principalement deux choses
1. Personnalisez la propriété Data-Bind MyBootStraptable. Pour la méthode de mise à jour dans ko.bindinghandlers.mybootstraptable, il n'est pas nécessaire de le définir.
2. Encapsulez le bootstaptable en ajoutant un bootstraptableViewModel à l'objet KO.
1.2. Commencer la liaison de la balise HTML
<table id = "tb_dept" data-bind = "mybootStrapable: $ root"> <tr> <th data-checkbox = "true"> </ th> <th data-field = "name"> nom du département </th> <th data-field = "Level"> le niveau du département </th> <th data-field = "des description </ th> <th data-field =" stematetime "> crée Time </th> </tr> </eaad> </ table>
Doute de code: définissez une balise de table et utilisez la liaison personnalisée à mybootstraptable. Comme mentionné dans l'article précédent, $ root peut être compris comme la signification de l'initialisation. Pour plus de simplicité, toutes les colonnes sont écrites directement dans <h>.
1.3. Activer la liaison de KO
Après le chargement de la page, démarrez la liaison de KO:
// initialiser $ (function () {// 1, init table tableInit.init (); // 2, enregistrer le module complémentaire, la suppression et l'événement de modification opérating.operateInit ();}); // initialize table var tableInit = {init: function () {// Tableau de liaison ViewModmel '/ Département / getDepartment', // Demande URL (*) Méthode: 'Get', // Méthode de demande (*) Barbar d'outils: '#toolbar', // Quel conteneur est utilisé pour le bouton d'outil QueryParams: function (param) {return {limite: param.limit, offset: param.offset};}, // Pagination Paramètres (*) Pagination: Page: *) Page (*) PAGIN Sidepagination: "serveur", // Méthode de pagination: Client Pagination Client, serveur Pagination (*) PageNumber: 1, // Initialiser la première page à charger, pages de première page par défaut: 10, // Nombre de lignes d'enregistrement par page (*) PageList: [10, 25, 50, 100], // Nombre de lignes par page pour sélectionner (*)}); document.getElementById ("tb_dept"));}};Doute de code: Une fois la page chargée, appelez l'objet bootstraptableViewModel encapsulé ci-dessus pour fusionner les paramètres passés, et enfin activer la liaison, et activez ceci.MyViewModel comme ViewModel lié. Le code de débogage montre que lorsque les Ko.ApplyBindings (this.myViewModel, document.getElementById ("tb_dept")); est exécuté; La liaison personnalisée prendra effet et le programme entrera dans la méthode INIT de l'objet KO.BindingHandlers.MybootStraptable pour initialiser Bootstaptable. Voici un point à expliquer:
init: function (élément, ValueAccessor, AllBindingsAccessor, ViewModel) {// L'OPARAM est ici $ ele.bootstraptable.apply ($ ele, arguments);}}Dans la méthode INIT ci-dessus, via le deuxième paramètre Valuaccessor, nous obtenons le ViewModel actuellement lié, qui est l'objet de ce.MyViewModel ci-dessus. Le blogueur pense que cela est propice à votre compréhension de la logique de la liaison personnalisée. Fondamentalement, lorsque nous exécutons cette phrase var $ ele = $ (élément) .bootStrapable (oviewmodel.params);, notre initialisation du tableau est terminée. Le blogueur définit une collection pour la méthode correspondante en arrière-plan. Par souci d'exhaustivité, je le publierai ici:
Département de département
2. Fonctionnement du bouton
Ce qui précède consiste à utiliser notre lien de données personnalisé par l'initialisation de l'amorçage. Voyons le «Shuangweiwai» à l'aide d'attributs de surveillance à l'aide de l'opération du bouton ci-dessous.
2.1. Afficher la page
Définissez d'abord notre bouton complémentaire sur la page Affichage
<div id = "barre d'outils"> <bouton id = "btn_add" type = "Button"> <span aria-hidden = "true"> </ span> add </ bouton> <button id = "btn_edit" type = "bouton"> <span aria-hidden = "true"> </ span> "Button> </ bouton> <bouton id =" btn_delete "Type =" Button "> <pander> <Button ID =" btn_delele " aria-hidden = "true"> </span> delete </futton> </div>
Pour plus de simplicité, le blogueur a utilisé une boîte contextuelle cachée pour contenir des zones de texte nouvellement ajoutées et modifiées. Bien sûr, de manière générale, vous pouvez utiliser des vues partielles ici, et il peut y avoir un edit.cshtml dans votre projet, mais ici, le blogueur les met sur une seule page car ce n'est pas l'objectif du texte.
<div id = "mymodal" tabindex = "- 1" role = "dialog" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <button type = "Button" data-diismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </ span> </ bouton> <h4 id = "MyModallabel"> Operation </h4> </ div> <div> <label for = "txt_departmentName"> Nom du département </ label> <input type = "text" name = "txt_departmentName" Data-bind = "value: name" id = "txt_departmentName" PlaceHolder = "Department Name"> </v> <v> pour = "txt_departmentLevel"> Niveau de département </ label> <input type = "text" name = "txt_departmentlevel" data-bind = "value: level" id = "txt_departmentlevel" placeholder = "DepartmentLevel"> </ div> <div> <label for = "txt_des"> Description </Bel> <put type = "Text" name = "txt_de" data-bind = "value: des" id = "txt_des" placeholder = "Description"> </ div> </div> <div> <Button type = "Button" Data-Dismiss = "MODAL"> <span aria-hidden = "true"> </span> close </ Button> <Button Type = "Button" id = "btn_submit" Data-Dismiss = "Modal"> <spanes aria-hidden = "true"> </span> Enregistrer </futton> </div> </div> </div>
2.2. Fonctionnement du bouton d'initialisation JS
// Opération Var Operation = {// Initialiser l'événement du bouton OperateInit: function () {this.operateadd (); this.operateupdate (); this.operateDelete (); this.departmentModel = {id: ko.observable (), nom: ko.obServable (), ko.observable (), des: ko.obServable (), ko.observable (), des: ko.obServable (), CreateTeT: CreateTerable: ko.observable ()};}, // ajouter operationadd: function () {$ ('# btn_add'). on ("click", function () {$ ("# mymodal"). modal (). on ("wamed.bs.modal", function () {var oemptymodel = {id: ko.obsservable (), nue: ko.observable (), niveau: ko.observable (), des: ko.observable (), createTime: ko.observable ()}; ko.utils.extend (operate.departmentmodel, oemptyModel); ko.applybindings (operate.departmentModel, document.getElementById ("MyModal")); operate.operaSave ();}). on ('Hidden.bs.Modal', fonction () {ko.cleannode (document.getElementById ("MyModal"));});});});});}, // Edit OperatorUpDate: fonction ()) {$ ('# btn_edit'). sur ("cliquez", fonction () {$ ("# mymodal"). modal (). on ("wamed.bs.modal", function () {var arrrectedData = tableInit.myViewModel.getSelelections (); if (! operateCheck (arrrrrecteddata)) {return;} Data To ViewModelko.utils.Extend (Operate.DepartmentModel, ko.mapping.fromjs (ArrrrectedData [0])); KO.ApplyBindings (Operate.DepartementModel, document.getElementById ("MyModal")); Operate.OperateAve ();}). sur ('cachat.bs.bodal. {// Effacer la liaison lors de la fermeture de la boîte pop-up (ce clair comprend l'effondrement de la liaison et la compensation de l'événement d'enregistrement) ko.cleannode (document.getElementById ("MyModal"));});});});});});}, // delete: function () {$ ('# btn_delete'). arrrectedData = tableInit.myViewModel.getSelections (); $. ajax ({url: "/ département / delete", type: "Post", contentType: 'application / json', data: json.stringify (ArrrectedData), succès: fonction (données, statut) {alert (status); // tableInit.myViewModel.Refresh ();}});});});}, // Enregistrer les données OperateAave: function () {$ ('# btn_submit'). On ("click", function () {// diable ViewModel to Data ModelVar odatamodel = ko.tojs (oviewmodel); var funcname = odatamodel.id?"update":"Add" ;$.ajax({url: "/ département /" + funcname, type: "post", data: odatamodel, succès: fonction (data, statut) {alert (status); tableInit.myViewModel.Refresh ();}});});});}, // Vérification des données OpérateCheck: fonction (arr) {if (arr.length <= 0) {alert ("s'il vous plaît sélectionnez au moins une ligne de données"); retourne false;} if (arr.Legth> 1) {alert ("" EDIT ON ") FAUX;} Retour True;}}Scepticisme du code: parlez-nous de la logique d'exécution ici. Tout d'abord, appelez l'opérateur.OperateInit (); Dans la méthode $ (function () {}). Dans la méthode OperatorInit (), enregistrez l'événement de clic du bouton sur la page et définissez également ce.DepartmentModel en tant que ViewModel nouvellement édité. Ceodmodel définit les attributs de surveillance correspondant aux éléments de la page. Vous souvenez-vous encore de quelques liens de données dans la boîte pop-up cachés ci-dessus? Oui, la valeur de valeur correspondante correspond aux attributs de surveillance ici. Après avoir réglé la liaison, tous les changements de surveillance de JS qui le conduisent. Au contraire, la variation de la valeur de la valeur de toutes les balises de l'interface entraînera inévitablement la modification de ses valeurs d'attribut de surveillance. Il s'agit de la soi-disant reliure bidirectionnelle. Jetons un coup d'œil à l'exécution de la liaison bidirectionnelle en détail.
2.3. Nouvelles opérations
$ ('# btn_add'). sur ("cliquez", fonction () {$ ("# myModal"). Modal (). On ("montré.bs.modal", function () {var oemptyModel = {id: ko.obServable (), name: ko.obServable (), niveau: ko.obServable (), des dessi ko.oBServable (), CreateTime: ko.oBServable ()}; ko.utils.extend (operate.departmentmodel, oEMPTyModel); ko.applybindings (operate.departmentModel, document.getElementById ("MyModal")); operate.operaSave ();}). on ('Hidden.bs.modal', function () {ko.cleannode (document.getElementById ("myModal"));});});Lorsque notre interface déclenche une nouvelle opération, la boîte modale cachée mentionnée ci-dessus apparaîtra en premier. Lorsque la boîte modale s'affiche, définissez d'abord un ViewModel vide, puis appelez KO.Utils.Extend (Operate.DepartmentModel, OEMPTyModel); Cette phrase écrasera le Global Operating.DepartmentModel par le vide ViewModel. La fonction de la méthode ko.utils.extend () est similaire à la fonction de $ .extend () dans jQuery. Les deux objets précédents sont fusionnés en fonction des objets suivants, et après la fusion, la liaison est activée à l'aide du nouveau ViewModel. Après l'activation de la liaison, enregistrez l'événement de clic du bouton Enregistrer. Lorsque vous ajoutez cela, une boîte modale apparaît. Étant donné que les attributs de surveillance dans ViewModel sont tous vides, la valeur de l'élément d'interface correspondant sera également effacée, nous le voyons donc dans le nouvel ajout:
Lorsque la boîte contextuelle est fermée, nous exécutons ko.cleannode (document.getElementById ("myModal")); à travers l'événement fermé. Cette phrase est très importante car pour le même DOM, KO ne peut être lié qu'une seule fois. Si vous devez vous lier à nouveau, vous devez d'abord effacer la liaison. De plus, la méthode CleanNode () effacera non seulement la liaison, mais effacera également les événements enregistrés dans le DOM. Vous devez faire attention lorsque vous l'utilisez!
2.4. Opérations de montage
$ ('# btn_edit'). sur ("cliquez", fonction () {$ ("# mymodal"). modal (). on ("wamed.bs.modal", function () {var arrrectedData = tableInit.myViewModel.getSelections (); if (! operate.OperateCK (arrrecteddata)) {return;} Modèle de données à ViewModelko.utils.Extend (Operate.DepartmentModel, ko.mapping.fromjs (ArrrectData [0])); ko.applybindings (operate.departModel, document.getElementByid ("MyModal")); operate.operateAve ();}). sur ('cachat.bs.bodal',). {// Effacer la liaison lors de la fermeture de la zone pop-up (ce clair inclut la compensation de la liaison et la compensation de l'événement d'enregistrement) ko.cleannode (document.getElementById ("myModal"));});});}) ;;Lorsque nous déclenchons l'opération d'édition, l'interface apparaît toujours. Dans l'événement pop-up de la zone contextuelle, nous prenons la ligne actuellement sélectionnée, puis vérifions si une ligne est sélectionnée. Il est préférable de convertir les objets JSON ordinaires en ViewModel avec les attributs de surveillance via la phrase ko.mapping.fromjs (ArrrectData [0]). Comme mentionné dans l'article précédent, cette méthode nécessite la prise en charge du fichier js knockout.mapping-latest.js. Après la conversion, le ViewModel est toujours mis à jour via la méthode ko.utils.extend (), puis activez la liaison. Étant donné que le ViewModel est mis à jour par les données de la ligne actuellement sélectionnée, le résultat est:
2.5. Sauvegarder
Après avoir ajouté et modifié les boîtes contextuelles, cliquez sur Enregistrer après avoir modifié les informations pertinentes et l'événement de sauvegarde sera déclenché.
$ ('# btn_submit'). sur ("cliquez", function () {// récupérer la vue actuelle ViewModelvar oviewModel = opérating.departmentModel; // converti le ViewModel en données ModelVar odatamodel = ko.tojs (oviewModel); var FuncName = odatamodel.id?"update":"add" ;$.ajax({url: "/ département /" + funcname, type: "Post", data: odatamodel, succès: function (data, status) {alert (status); tableInit.myViewModel.refresh ();});});Lorsque l'événement de sauvegarde est déclenché, nous obtenons d'abord le ViewModel lié à la page, c'est-à-dire la méthode Operating.DepartmentModel, puis utilisons la méthode ko.tojs () pour convertir le ViewModel avec des attributs de surveillance en un objet JSON avec des données purs. Cette méthode est intégrée à KO et ne nécessite pas d'autres supports JS. Après avoir obtenu l'objet JSON, envoyez une demande AJAX pour ajouter ou modifier des données. Cela reflète bien la liaison bidirectionnelle. Une fois la valeur de toutes les zones de texte sur l'interface change, le changement d'opération.DepartmentModel sera également déclenché.
2.6. Supprimer
Il n'y a rien à dire sur l'opération de suppression et n'a rien à voir avec KO.
3. Résumé
Ce qui précède introduit l'utilisation conjointe de KO et bootstraptable via une simple opération d'ajout, de suppression, de modification et de recherche. KO peut vous libérer du DOM et vous concentrer sur ViewModel. En regardant l'intégralité du code JS, vous pouvez à peine voir JQuery's Val (), Text () et d'autres opérations pour obtenir et attribuer des valeurs à l'interface DOM. Cela a-t-il l'air propre et rafraîchissant et haut de gamme? Bien sûr, cela peut simplement être quelques-uns des usages les plus fondamentaux de KO. Après tout, les blogueurs n'apprennent KO que depuis 3 jours, et des usages plus avancés doivent être explorés. Lorsque vous vous y habituez depuis un moment, vous partagerez certains de ses usages avancés avec tout le monde. Si vous pensez que cet article peut vous aider à comprendre le principe de KO et son utilisation, vous pourriez aussi bien le recommander. L'éditeur en est reconnaissant ici!
Ce qui précède est le contenu entier de la combinaison de bootstraptable et knockoutjs pour implémenter la fonction d'addition, de suppression, de modification et de recherche [2]. J'espère que ce sera utile à tous!