Prefacio: El blogger ha compartido algunos usos básicos de KnockoutJS y BootstraTable antes. Todas son aplicaciones básicas y no están encapsuladas en absoluto. Simplemente evitan el valor y la asignación de los controles HTML, y están lejos de mostrar la exquisitez de MVVM. Recientemente, el proyecto planea usar oficialmente KO, por lo que ha realizado algunos empaques para KO y Bootstraptable, y Park Friends se comparte aquí como referencia por Park Friends. Para obtener ideas de empaque, consulte el Blog Park Master Xiao Qin. Si los amigos del parque tienen una mejor manera, no dude en discutirlo.
Artículos de la serie KnockoutJS:
BootStraptable y KnockoutJs se combinan para lograr la función de agregar, eliminar, modificar y verificar [1]
BootStraptable y KnockoutJs se combinan para lograr la función de agregar, eliminar, modificar y verificar [2]
1. El primer model de visión maneja la consulta
La implementación de la demostración aún continuará con la función de gestión del departamento de la última vez. La siguiente expansión explica por el flujo de datos.
1. El fondo devuelve la implementación de ViewModel a la vista
Public ActionResult index () {var modelo = new {tableParams = new {url = "/departamento/getdepartment", // pageSize = 2,}, urls = new {delete = "/departamento/delete", edit = "/departament/edit", add = "/edit",}, querycondition = new {name = ", des =" ""}; Ver (modelo);}Duda del código: el modelo devuelto aquí contiene tres opciones
• TableParams: parámetros de inicialización de la tabla de página. Dado que los parámetros predeterminados se definen en JS, los parámetros establecidos aquí son parámetros de inicialización específicos de la página.
• URLS: la ruta de URL que contiene la solicitud de suma, eliminación y modificación.
• Consulta: las condiciones de consulta de la página.
2. Código de página CSHTML
El código de página index.cshtml es el siguiente:
@{Layout = null;} <! DocType html> <html> <head> <meta name = "viewport" content = "width = dispositivo-width"/> <title> índice </title> <link href = "~/content/bootstrap/css/bootstrap.min.css" Rel = "Stylesheet"/> <Linket <> <Link Linke href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="~/scripts/jquery-1.9.1.min.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script><script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script><script src="~/scripts/knockout/knockout-3.4.0.min.js"></script><script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping-latest.js"> </script> <script src = "~/scripts/extensions/knockout.index.js"> </script> <script> <script> src="~/scripts/extensions/knockout.bootstraptable.js"></script><script type="text/javascript">$(function(){var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));ko.bindingViewModel(data, documento.getElementById ("div_index"));}); </script> </head> <body> <Div Id = "div_index" style = "relled: 0px; overflow-x: hidden;"> <div> <div> condición de consulta </div> <divi <borm id = "formeSearch"> <div> <belebrel> de departamento </selbel> <viv> data-bind = "valor: querycondition.name"> </div> <label> Descripción del departamento </label> <viv> <input type = "text" data-bind = "valor: querycondition.des"> </div> <div style = "text-align: derecho;"> <button type = "botón" button " type = "Button" data-bind = "haga clic: queryClick"> QUERY </boton> </div> </form> </div> </div> <div id = "Barbar de herramientas"> <Button Data-bind = "Click: addClick" type = "Botón"> <span aria-hidden = "true"> <//> add </ button <button <button data-bind = "haga clic: editClick" type = "type =" button "<span" aria-hidden = "true"> </span> modificar </boton> <botón data-bind = "hacer clic: deleteClick" type = "botón"> <span aria-hidden = "true"> <//span> eliminar </boton> </div> <table data-bind = "bootstraTable: bootstrautable"> <tr> <th-checkbox = "true"> </th> <th th data- name "name" "name" "name" Nombre </th> <th data-field = "nivel"> nivel de departamento </th> <th data-field = "des"> descripción </th> <th data-field = "strcreateTime"> tiempo de creación </th> </tr> </tead> </table> </div> </body> </html>Duda del código: al igual que el artículo anterior, debe citar jQuery, bootstrap, bootstraptable, knockout y otros archivos relacionados. Aquí están los siguientes dos documentos:
• knockout.index.js: encapsula las propiedades y los enlaces de eventos relacionados con la página de consulta.
• knockout.bootstaptable.js: encapsula la inicialización de los métodos de enlace de bootstraptable y personalizados.
Todas las interacciones de página anteriores están encapsuladas en JS público, por lo que no es necesario escribir una gran cantidad de códigos duplicados, como elementos DOM para obtener tareas, vinculación de eventos, etc. en la página. Solo hay las dos oraciones anteriores de JS escritas en esta página. ¿No es muy fácil?
3. Encapsulación JS
Echemos un vistazo a los dos archivos JS mencionados anteriormente, knockout.bootstable.js y knockout.index.js.
(1) knockout.bootstaptable.js
(function ($) {// Agregue un método bootstraptableViewModel a ko.bootstaptableViewModel = function (options) {var que = this; this.default = {toolBar: '#toolbar', // que contenedor para el botón de herramientas consulta: function (param) {return {limit: param.limit, offset: offset: offset}; Parámetros (*) Pagination: true, // do Pagination Display (*) SidePagination: "servidor", // Método de paginación: Paginación de cliente cliente, Pagination del servidor del servidor (*) PageNumber: 1, // Inicializar la primera página para cargar, la página de primera página predeterminada: 10, // El número de raíes registradas por página (*) PAGELIST Seleccionar (*) Método: 'Get', Búsqueda: True, // ¿Se muestra la búsqueda de la tabla? clickToselect: true, // hace el clic para seleccionar las filas habilitadas showToGgle: true,}; this.params = $ .extend ({}, this.default, options || {}); // Obtener el registro seleccionado this.getSelections = function () {var arrres = that.bootstaptable ("getSelections") de regreso de regreso;};};};}; {that.BootStraptable ("Refresh");};}; // Agregar Ko Custom Binking Ko.BindingHandlers.BootStraptable = {init: function (element, valueAcCessor, allBindingSacCessor, ViewModel) {// Oparam aquí es el ViewModelvar límite BoundModelvar = OvieWel = ValueAcCessor (); $ (elemento) .Bootstaptable (oviewModel.Params); // Agregar un método bootstraPTable al ViewModel oviewModel.BootStraptable = function () {return $ ele.bootstraptable.apply ($ ele, argumentos);}}, actualización: function (elemento, valueAcCessor, allbindingsaccessor, ViewModel) {}};}) (jQuery);Duda del código: el código anterior hace principalmente dos cosas
1. Modelo de vista personalizado inicializado por BootStraptable.
2.
Agregue KO Bindings personalizados.
Si los amigos del parque no entienden el uso de la vinculación personalizada, puede consultar las dos primeras publicaciones de blog del blogger (una) y (dos) para una introducción detallada.
(2) knockout.index.js
(function ($) {ko.bindingviewModel = function (data, bindElement) {var self = this; this.QueryCondition = ko.mapping.fromjs (data.queryCondition); this.defefaultParams = {queryParams: function (param) {var params = selefonycondition; params.limit = params.limit; params.limit; param.offset; return params;}}; var tableParams = $ .extend ({}, this.defaultQueryParams, data.tableParams || {}); this.bootstrautable = new Ko.BootStraptableViewModel (tableParams); // Claro Event this.clarear = {$ .Eacher. valor) {// clare if (typeOf (valor) == "function") {this (''); id = "mymodal" tabindex = "-1" rol = "dialog" aria-labelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, null, function () {}); $ ("cuerpo"). append (dialog); dialog.modal (). Alvado Al cerrar el cuadro emergente (este BARRO incluye borrar el enlace y la eliminación del evento de registro) ko.cleanNode (document.getElementById ("formedit")); dialog.remove (); self.bootstraptable.refreshesh ();});}; // edit Event this.EditClick = function () {var ArrRegedData = Self.LoBoT.BoT.BoT.BoT.BoOTT (arrrectedData.length <= 0 || arrrectedData.length > 1) {alert("Only edit one line at a time");return;}var dialog = $('<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');dialog.load(data.urls.edit, ArrRectedData [0], function () {}); $ ("cuerpo"). append (dialog); dialog.modal (). on ('hidden.bs.modal', function () {// borrar el enlace al cerrar el cuadro emergente (este claro incluye borrar el enlace y borrar el registro de registro evento) ko.cleannode (document.getElementById ("formedit")); dialog.remove (); self.bootstaptable.refreshesh ();});}; // eliminar el evento this.deleteClick = function () {var arreRectedData = self.BootStraptable.getSelections (); if (! if (! ArrrEntEdtATATATATATATATETATA. {alerta ("Seleccione al menos una línea"); return;} $. Ajax ({url: data.urls.delete, escriba: "post", contentType: 'Application/json', data: json.stringify (arrritedData), éxito: función (datos, estado) {alerta (status); self.bootstaptable.refresh ();}});}; ko.applyBindings (self, bindElement);};}) (jQuery);Duda del código: esto JS encapsula principalmente los atributos y la vinculación del evento de los elementos de la página, y varios lugares que deben explicarse
• this.QueryCondition = Ko.Mapping.FromJS (data.QueryCondition): El propósito de esta oración es convertir las condiciones de consulta que se pasan desde los antecedentes de los datos JSON a los atributos de monitoreo. Solo ejecutando esta oración se pueden monitorear los atributos y los elementos de página en ambas direcciones.
• Self.Bootstaptable.Refresh (): El significado de esta oración es actualizar los datos de la tabla. En realidad, se llama el método de actualización de Bootstraptable, pero el blogger simplemente lo encapsula en el archivo knockout.bootstaptable.js.
• dialog.load (data.urls.edit, null, function () {}): Al agregar y editar, se utiliza el método Load () de jQuery. La función de este método es solicitar los elementos de página de esta URL y ejecutar el código JS de la página correspondiente de la URL. Este método es muy poderoso para referirse dinámicamente al archivo JS y ejecutar el código dentro del archivo JS.
Finalmente, adjunte el código correspondiente al método de fondo getdepartment ()
[Httpget] public jsonResult getDepartment (int limit, int offset, string name, string des) {var lstres = departmentModel.getData (); if (! String.isnullorEmpty (name)) {lstres = lstres.where (x => x.name.contains (name)). Tolist ();} si (? lstres.skip (offset) .take (límite) .tolist (), total = lstres.count}; return json (ores, jsonRequestBehavior.Allowget);}En este punto, las funciones de consulta y compensación de la página de consulta se pueden realizar.
¿Todavía tiene una pregunta: ¿qué pasa si necesitamos personalizar los eventos de Bootstraptable? No se puede transmitir a través del modelado View en el fondo, ¿verdad?
De hecho, el método del evento JS no se puede pasar desde el fondo, por lo que necesitamos personalizar el método de procesamiento del evento en el frente, por ejemplo, podemos hacer esto:
<script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonconvert.serializeObject (modelo)); data.tableparams.onloadSuccess = function (data) {alerta ("Event de carga");}; ko.bindingmodel (datos, datos, datos, datos, datos, datos, datos, datos de carga "); document.getElementById ("div_index"));}); </script>2. Obtenga el segundo ViewModel Editar
Uno de los modelos de vista anteriores maneja las funciones de consulta y eliminación, pero agregar y editar también requiere el soporte de otro ViewModel. Echemos un vistazo a la implementación del paquete de edición.
1. Implementación de ActionResult
A través de la consulta de código anterior, podemos saber que cuando el usuario haga clic en Agregar y editar, se solicitará otra vista →/departamento/editar. Echemos un vistazo a la implementación de la vista de edición
Public ActionResult Edit (Modelo de departamento) {var oresModel = new {editModel = model, urls = new {Subt = Model.id == 0? "/Departamento/add": "/departamento/update"}}; View de retorno (oresmodel);}Duda del código: el código anterior es muy simple, que es devolver un Modelo View a la página Vista, que contiene la entidad editada y la URL enviada. Si esta clave primaria existe esta entidad se determina si la confirmación actual es una nueva entidad o una entidad de edición.
2. Código CSHTML
Editar.cshtml El código es el siguiente:
<Form ID = "Formedit"> <Div Role = "Documento"> <Div> <Viv> <Botton Type = "Button" Data-Dismiss = "Modal" Aria-Label = "Close"> <span Aria-Hidden = "True"> × </span> </botón> <h4 id = "mymodallabel"> Operation </h4> </iv> <viv> <viv> for = "txt_departmentName"> Nombre del departamento </etiqueta> <input type = "text" name = "txt_departmentName" data-bind = "Value: editModel.name" PlaceHolder = "Departamento de departamento"> </div> <iv> <label for = "txt_departmentlevel"> Nivel de departamento </etlabe> <input type = "text" name = "txt_dexelvel" data-bind = "valor: editModel.level" placeHolder = "de departamento"> </div> <div> <etiqueta for = "txt_des"> descripción </label> <input type = "text" name = "txt_des" data-spind = "valor: editModel.des" Plaza Holder = "Descriptive"> </div> <divir> <button type = "Botón" Data-dIsmisss "DataSiss" Botón "DataSiSS". aria-hidden = "true"> </span> Close </Button> <Button type = "Envir"> <span aria-hidden = "true"> </span> save </boton> </div> </div> </orm> <forma href = "~/content/bootstraPvalidator/ src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javascript"> $ (function () {var edata = = @Html.raw (newtonsoft.json.jsonconvert.SerializeObject (modelo)); Ko.BindingEditViewModel (editData, {});Duda del código: dado que hemos agregado el componente de verificación BootstraPvalidator, necesitamos hacer referencia a los JS y CSS relevantes. Este archivo knockout.edit.js encapsula principalmente las propiedades y la unión de eventos de la página Editar. Echemos un vistazo al código de implementación de este JS.
3. Encapsulación JS
Código de knockout.edit.js:
(function ($) {ko.bindingeditViewModel = function (data, validatorFields) {var that = {}; that.editModel = ko.mapping.fromjs (data.editModel); That.default = {Message: 'VERIFICA ArrRectedData = ko.tojs (that.EditModel); $. Ajax ({url: data.urls.submit, type: "post", contentType: 'Application/json', data: json.stringify (ArrritedData), éxito: función (datos, estado) {alerta (status);}}); $ ("#myModal"). Modal ("Hide");}}; document.getElementById ("formedit"));};}) (jQuery);Duda del código: esto JS encapsula principalmente las propiedades del modelo de edición y la unión del evento enviado. Dado que se utiliza el componente de verificación BootstraPvalidator, se requiere el envío del formulario. De hecho, la identificación de la página no debe aparecer en JS público, como "formedit" y "mymodal" arriba. Esto se puede pasar como un parámetro, que debe optimizarse. El parámetro ValidatorFields representa el campo de verificación del componente de verificación. Si el formulario no requiere verificación, está bien pasar un JSON vacío o no. No hicimos verificación de campo en el artículo anterior. De hecho, en términos generales, la tabla básica tendrá uno o varios campos no vacíos, como la verificación no vacía de los nombres de los departamento. El código en la página editar.cshtml se cambia a esto:
<Form ID = "Formedit"> <Div Role = "Documento"> <Div> <Viv> <Botton Type = "Button" Data-Dismiss = "Modal" Aria-Label = "Cerrar"> <span Aria-Hidden = "true"> × </span> </botón> <h4 id = "mymodallabel"> Operation </h4> </iv> <iv> <belse For = " Nombre </selabel> <input type = "text" name = "name" data-bind = "valor: editModel.name" placeholder = "departamento name"> </div> <div> <etiqueta for = "txt_departmentLevel"> departamento de departamento </label> <input type = "text" name = "nivel"-bind = "valor: editModel.level" placeholder = "departamento de departamento"/"departament" </"/" name "<sh bind" Value <shiShiShel "</"/"Tabla de departamento </" Tabla de departamento </"/" </"</"/"<shiShi" </", <Sci-bind". for="txt_des">Description</label><input type="text" name="Des" data-bind="value:editModel.Des" placeholder="Des"></div><div><button type="button" data-dismiss="modal"><span aria-hidden="true"></span>Close</button><button type="submit"><span aria-hidden = "true"> </span> save </boton> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.css" rel = "stylesheet"/> <script " src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <script src = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javascript"> $ (function () {var edata = = @Html.raw (newtonsoft.json.jsonconvert.serializeObject (modelo)); ko.bindingeditviewModel (editData, {name: {Validators: {noTempty: {Mensaje: '¡El nombre no puede estar vacío!'}}}});Luego se verificará automáticamente al enviar:
Nota: El nombre del atributo de verificación corresponde al atributo de nombre de la etiqueta de entrada, por lo que para hacer verificación, este atributo de nombre debe establecerse correctamente.
Es mejor adjuntar un método de fondo para agregar, eliminar y modificar:
[Httppost] public jsonResult add (departamento odata) {departmentModel.add (odata); return json (new {}, jsonRequestBehavior.allowget);} [httppost] public jSonResult Update (departament Odata) {departamento de departamento.update (odata); regreso JSON (nuevo {{},,, departament. JsonRequestBehavior.Anlowget);} [httppost] public jsonResult Delete (List <Scontil> Odata) {DepartmentModel.Delete (ODATA); return json (nuevo {}, jsonRequestBehavior.Anlowget);}En este punto, el efecto de agregar, eliminar, modificar y verificar toda la página está bien. Echemos un vistazo al efecto brevemente:
3. Resumen
Lo anterior simplemente encapsula el servicio de adición, deleción, modificación y búsqueda de BootstRaptable+KO, que es solo un paquete primario. Si necesita aplicarlos a su proyecto, también puede necesitar algunas medidas de optimización simples, como:
1. Si es simplemente un modelo de vista de una página, ¿puede ser mejor escribirlo directamente en la página Vista sin devolverlo de ActionResult en segundo plano, y guarda el problema de la serialización y el paso de los parámetros. Esto debe ser optimizado.
2. La identificación del elemento de página no debe aparecer en el público JS. El elemento de página se puede pasar a través de parámetros.
3. Agregue y edite métodos de eventos para tener mucho código duplicado en el cuadro emergente. La mejor manera de hacer esta parte es encapsular el cuadro emergente en un componente separado para llamarlo, lo que puede reducir la mayor parte del código JS.
4. Si hay elementos seleccionados de cuadro desplegable en las condiciones de consulta y las propiedades editadas, es posible que también deba encapsular el DataSource y otros atributos del cuadro desplegable. Esta parte es muy común. Después de que el blogger haya resuelto la demostración, agregue esta pieza.
Lo anterior es la solución al bootstraptable + knockoutjs introducido por el editor para lograr la adición, eliminación, modificación y búsqueda (3) Los dos modelos de vista han completado la adición, eliminación, modificación y búsqueda. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!