En el artículo anterior, le presenté la combinación de bootstraptable y knockoutjs para implementar las funciones de suma, eliminación, modificación y búsqueda [1], e introduje algunos usos básicos de knockout.js. A continuación, continuaremos presentándolo a través de este artículo. Si planea usar KO para hacer proyectos, ¡echemos un vistazo!
Bootstrap es un marco frontal, algo bueno para liberar a los desarrolladores web. Muestra que la UI es de alta gama, atmosférica y de alta gama. En teoría, no necesita escribir una línea de CSS. Simplemente agregue los atributos apropiados a la etiqueta.
KnockoutJS es un marco MVVM implementado con JavaScript. Muy bien. Por ejemplo, después de agregar o disminuir los elementos de datos de la lista, no es necesario actualizar todo el fragmento de control o escribir nodos de adición y eliminación de JS por sí mismo. Simplemente defina la plantilla y los atributos que cumplen con sus definiciones de sintaxis. En pocas palabras, solo necesitamos prestar atención al acceso a los datos.
1. Vista previa del efecto
De hecho, no tiene efecto. Es solo una simple adición, eliminación, modificación y búsqueda. La clave todavía está en el código. El uso de KO puede guardar muchas operaciones de enlace de datos DOM de interfaz. A continuación se muestra el código JS para toda la lógica de agregar, eliminar, modificar y buscar:
Efecto de la página:
2. Ejemplos de código
Ok, ¡vamos al punto! El blogger planea presentarlo en dos partes. La primera parte es la parte de inicialización de la tabla, y la segunda parte es la parte de operación del botón, eliminación y parte de modificación.
1. Inicialización de la tabla
1.1. Preparación
Primero mire los archivos JS y CSS a los que deben referirse
<link href = "~/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script <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/extensions/knockout.mapping-latest.js"></script><script src = "~/content/bootstrap-table/knockout.bootstaptable.js"> </script> <script src = "~/scripts/department.js"> </script>
Todos son archivos CSS y JS de uso común. Principalmente tenemos dos archivos JS personalizados: knockout.bootstaptable.js y departamento.js. En el artículo anterior, presentamos que usar KO puede personalizar nuestro enlace de datos. Del mismo modo, para la unión de la tabla, también definimos un código de enlace personalizado dentro de Knockout.Bootstaptable.js.
// Agregar ko personalizado Ko.BindingHandlers.mybootStraptable = {init: function (element, valueAcCessor, allbindingsAccessor, ViewModel) {// El oparam aquí es el ViewModelVar OviewModel = ValueAccessor (); var $ ele = $ (Elemento) .BootStraptable (OviewModel. Método bootStraptable para verModel oviewModel.BootStraptable = function () {return $ ele.bootstaptable.apply ($ ele, argumentos);}}, update: function (element, valueAcCessor, allbindingsAcccessor, ViewModel) {}}}; // inicialización (function ($) {// a bootsTaptaptaptapt Ko.BootStraptableViewModel = function (options) {var this = this.default = {search: true, // si muestra la búsqueda de la tabla? MinimumCountColumns: 2, // El número mínimo de columnas permitidas hacer clicktoselect: true, // donde habilitar haga clic en Seleccionar fila showToGgle: true,}; arrres;}; // Actualizar this.Refresh = function () {that.bootstaptable ("refresh");};};}) (jQuery);Duda del código: este archivo JS principalmente hace dos cosas
1. Personalice la propiedad de unión a datos mybootstaptable. Para el método de actualización en Ko.BindingHandlers.Mybootstaptable, no es necesario definirlo.
2. Encapsula el bootstraptable agregando un BootStraptableViewModel al objeto KO.
1.2. Comience a vincular la etiqueta HTML
<table id = "tb_dept" data-bind = "mybootstaptable: $ root"> <tr> <th data-checkbox = "true"> </th> <th data-field = "name"> name de departamento </th> <th data-field = "nivel"> nivel de departamento </th> <th data-field = "des"> descripción </th> <th data-field = "strcreatEteTime"> CREA Tiempo </th> </tr> </téad> </table>
Duda del código: defina una etiqueta de tabla y use un enlace personalizado para mybootstaptable. Como se menciona en el artículo anterior, $ root puede entenderse como el significado de inicialización. Por simplicidad, todas las columnas se escriben directamente en <th>.
1.3. Activar la unión de KO
Después de que se carga la página, inicie la encuadernación de KO:
// Inicializar $ (function () {// 1, init table tableInit.init (); // 2, registrar el evento de adición, deleción y modificación del evento operativo.operateInit ();}); // Inicializar la tabla var tableInit = {init: function () {// ViewModelthis.myViewModel = new ko.bootstraptable Viewmodel ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ '/Departamento/getdepartment', // request url (*) método: 'get', // request Method (*) ToolBar: '#ToolBar', // ¿Qué contenedor se usa para el botón de herramienta? Paginación lateral: "servidor", // Método de paginación: Paginación de cliente cliente, servidor servidor Pagination (*) PageNumber: 1, // Inicialice la primera página para cargar, Página de primera página predeterminada: 10, // número de líneas de grabación por página (*) PAGELIST: [10, 25, 50, 100], // Número de cañones por página a seleccionar (*)}); document.getElementById ("tb_dept"));}};Duda del código: después de cargar la página, llame al objeto BootStraptableViewModel encapsulado anteriormente para fusionar los parámetros pasados, y finalmente active el enlace, y active esto. El código de depuración muestra que cuando el ko.applybindings (this.myviewModel, document.getElementById ("tb_dept")); se ejecuta; El enlace personalizado entrará en vigencia y el programa ingresará el método init de Ko.BindingHandlers.Mybootstaptable Object para inicializar BootStraptable. Aquí hay un punto a explicar:
init: function (element, valueAcCessor, allbindingsAccessor, ViewModel) {// El Oparam aquí es el ViewModelVar OviewModel = valueAcCessor (); var $ ele = $ (elemento) .BootStraptable (oviewModel.params); // agregar bootstraptable método a vermodel $ ele.bootstaptable.apply ($ ele, argumentos);}}En el método init anterior, a través del segundo parámetro valueAccessor, obtenemos el modelado de vista actualmente unido, que es el objeto de esto. MyviewModel anterior. El blogger cree que esto es propicio para su comprensión de la lógica de la vinculación personalizada. Básicamente, cuando ejecutamos esta oración var $ ele = $ (elemento) .BootStraptable (oviewModel.Params);, se completa nuestra inicialización de la tabla. El blogger define una colección para el método correspondiente en segundo plano. En aras de la integridad, lo publicaré aquí:
Controlador de departamento
2. Operación del botón
Lo anterior es utilizar nuestro enlace de datos personalizado a través de la inicialización de BootStraptable. Experimentemos el "Shuangweiwai" utilizando los atributos de monitoreo utilizando la operación del botón a continuación.
2.1. Ver página
Primero, defina nuestro botón Add-On-Deletion en la página Ver
<div id = "Barra de herramientas"> <Botton id = "Btn_add" type = "Button"> <span aria-hidden = "true"> </span> Agregar </botón> <botón id = "btn_edit" type = "botón"> <span aria-hidden = "true"> </span> modificar </ button <button iD = "btn_delete" type = "button" <span "<sue" aria-hidden = "true"> </span> eliminar </boton> </div>
Para simplificar, el blogger utilizó un cuadro emergente oculto para contener cuadros de texto recién agregados y editados. Por supuesto, en términos generales, puede usar vistas parciales aquí, y puede haber una edición.cshtml en su proyecto, pero aquí el blogger los pone en una página porque este no es el foco del texto.
<div id = "mymodal" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <button type = "botón" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "true"> × </span> </button> <h4 h4 id = "mymodallabel"> operación </h4> </div> <div> <etiqueta for = "txt_departmentName"> Nombre del departamento </etiqueta> <input type = "text" name = "txt_departmentName" data-bind = "valor: nombre" id = "txt_departmentName" Nombre del departamento = "Nombre del departamento"> </div> <div> for = "txt_departmentLevel"> nivel de departamento </etiqueta> <input type = "text" name = "txt_departmentLevel" data-bind = "value: nivel" id = "txt_departmentLevel" placeholder = "departamlevel"> </div> <div> <label para = "txt_des"> Descripción </etlabe> <put type = "text" name = "" "txtes" txtes " data-bind = "value: des" id = "txt_des" placeHolder = "Descripción"> </div> </div> <viv> <button type = "botón" data-dismiss = "modal"> <span aria-hidden = "true"> </span> spane </button> <button type = "botón" id = "btn_submit" data-dismiss = "modal" modal "<span" aria-hidden = "true"> </span> save </boton> </div> </div> </div>
2.2. Operación del botón de inicialización JS
// Operation var operation = {// Inicialize Botton Event OperateInit: function () {this.operateadd (); this.OperateUpdate (); this.operatedElete (); this.departmentModel = {id: ko.observable (), name: ko.observable (), nivel: ko.observable (), des: des: des: des: ko., ko.), createMeTime (), create. ko.observable ()};}, // agregue operationAdd: function () {$ ('#btn_add'). on ("click", function () {$ ("#mymodal"). modal (). on ("shows.bs.modal", function () {var oEmptyModel = {id: ko.observable (), name: name ko.observable (), nivel: ko.observable (), des: ko.observable (), createTime: ko.observable ()}; ko.utilss.extend (operación document.getElementById ("mymodal")); operate.operatesave ();}). on ('hidden.bs.modal', function () {ko.cleannode (document.getElementById ("myModal"));});});});});}, // edit OperatorUpdate: function (); {$ ('#btn_edit'). on ("click", function () {$ ("#mymodal"). modal (). on ("shows.bs.modal", function () {var arrritedData = tableinit.myviewModel.getSelections (); if (! Operate.operateCheck (arrrectedData) a vermodelko.utils.extend (operate.departmentModel, ko.mapping.FromJS (arrrRedData [0])); ko.applyBindings (operate.departmentModel, document.getElementById ("mymodal")); operate.operatesave ();}). on ('hidden.bs.smodal') {// Borrar el enlace al cerrar el cuadro emergente (este borde incluye borrar el enlace y borrar el evento de registro) ko.cleannode (document.getElementById ("mymodal"));});});});});});}, // delete: function () {$ ('#btn_delete'). ArrRectedData = TABLEInIT.MyViewModel.getSelections (); $. Ajax ({url: "/departamento/delete", type: "post", contentType: 'Application/JSson', Data: JSON.Stringify (ArrotedData), éxito: Función (datos, estado) {alerta (estado); // tableinit.myViewModel.Refreshresh ();}});});});}, // guardar datos operaciones ViewModel to Data ModelVar Odatamodel = Ko.tojs (OviewModel); var funcname = odatamodel.id?"update":"add";$.ajax({url: "/departament/"+funcname, type: "post", datos: odatamodel, éxito: función (datos, estado) {alerta (status); tableinit.myviewModel.refresh ();}});});});}, // verificación de datos operateCheck: function (arr) {if (arr.length <= 0) {alert (", seleccione al menos una fila de datos"); return false;} if (arr.length> 1) {alerta (solo alerta (solo una alerta (solo una alerta de datos "); verdadero;}}Secepticismo del código: Cuéntanos sobre la lógica de ejecución aquí. Primero, llame al operador.operateInit (); En el método $ (function () {}). En el método OperatorInit (), registre el evento de clic del botón en la página y también defina esto. DepartmentModel como el ViewModel recientemente editado. Este Modelo ViewModel define los atributos de monitoreo correspondientes a los elementos de la página. ¿Todavía recuerdas algunos vínculos de datos en el cuadro emergente oculto arriba? Sí, el valor de valor correspondiente corresponde a los atributos de monitoreo aquí. Después de establecer el enlace, todos los cambios de monitoreo en JS que conducen a esto. DepartmentModel activará el valor de las etiquetas de enlace en la interfaz para cambiar. Por el contrario, el cambio en el valor del valor de todas las etiquetas en la interfaz inevitablemente causará el cambio en sus valores de atributo de monitoreo. Esta es la llamada vinculación bidireccional. Echemos un vistazo a la ejecución de la vinculación bidireccional en detalle.
2.3. Nuevas operaciones
$ ('#btn_add'). on ("hacer clic", function () {$ ("#mymodal"). modal (). on ("shows.bs.modal", function () {var oemptylel = {id: ko.observable (), name: ko.observable (), nivel: ko.observable (), des: ko., ko., create. ko.observable ()}; ko.utils.extend (operate.departmentModel, oemptymodel); ko.applybindings (operate.departmentModel, document.getElementById ("myModal")); operate.operatesave ();}). On ('hidden.bs.modal', function ())); {ko.cleannode (document.getElementById ("mymodal"));});});Cuando nuestra interfaz desencadena una nueva operación, la caja modal oculta mencionada anteriormente aparecerá primero. Cuando se muestra el cuadro modal, primero defina un Modelo View View y luego llame a Ko.Utils.extend (operate.departmentModel, oEmptyModel); Esta oración sobrescribirá la operación global. DepartmentModel por el Modelo View View. La función del método ko.utils.extend () es similar a la función de $ .extend () en jQuery. Ambos objetos anteriores se fusionan en función de los objetos posteriores, y después de la fusión, la unión se activa utilizando el nuevo ViewModel. Después de activar el enlace, registre el evento de clic del botón Guardar. Al agregar esto, aparece una caja modal. Dado que los atributos de monitoreo en ViewModel están todos vacíos, el valor del elemento de interfaz correspondiente también se borrará, por lo que vemos esto en la nueva adición:
Cuando el cuadro emergente está cerrado, ejecutamos ko.cleannode (document.getElementById ("myModal")); a través del evento cerrado. Esta oración es muy importante porque para el mismo DOM, KO solo puede estar atado una vez. Si necesita unir nuevamente, primero debe borrar el enlace. Además, el método CleanNode () no solo borrará el enlace, sino que también borrará los eventos registrados en el DOM. ¡Debes prestar atención al usarla!
2.4. Operaciones de edición
$ ('#btn_edit'). on ("hacer clic", function () {$ ("#mymodal"). modal (). on ("shows.bs.modal", function () {var ArrrectedData = TableInit.myviewModel.getSelections (); if (! Operate.operateCheck (arrredData)) {retorno;} Modelo a verModelko.utils.extend (operate.departmentModel, ko.mapping.FromJS (ArrRectedData [0])); ko.applyBindings (operate.departmentModel, document.getElementById ("mymodal")); operate.operatesave ();}). On ('hidden.bs.ps.modal') {// Borrar el enlace al cerrar el cuadro emergente (este claro incluye borrar el enlace y borrar el evento de registro) ko.cleannode (document.getElementById ("myModal"));});});});;Cuando activamos la operación de edición, la interfaz todavía aparece. En el evento emergente del cuadro emergente, tomamos la fila seleccionada actualmente y luego verificamos si se selecciona una fila. Es mejor convertir objetos JSON ordinarios en ViewModel con atributos de monitoreo a través de la oración ko.mapping.fomjs (ArrrectedData [0]). Como se mencionó en el artículo anterior, este método requiere el soporte del archivo js knockout.mapping-latest.js. Después de la conversión, el Modelo ViewModel todavía se actualiza a través del método ko.utils.extend () y luego activa el enlace. Dado que ViewModel se actualiza con los datos de la fila seleccionada actualmente, el resultado es:
2.5. Guardar operación
Después de agregar y editar cuadros emergentes, haga clic en Guardar después de modificar la información relevante, y se activará el evento Guardar.
$ ('#btn_submit'). on ("hacer clic", function () {// obteniendo el vista actual de modelvar oviewModel = operating.departmentModel; // Convertir el Modelo de ViewS a Data ModelVar Odatamodel = KO.ToJS (OviewModel); var CancName = var Cancname = = odatamodel.id?"update"::"add";$.JAJAX({URL: "/departament/"+funcname, type: "post", data: odatamodel, éxito: function (data, status) {alerta (status); tableinit.myviewmodel.resfresh ();}});});Cuando se activa el evento Guardar, primero obtenemos el Modelo ViewModel atado a la página, es decir, Operating.DePartmentModel, y luego usamos el método Ko.ToJS () para convertir el Modelo ViewModel con atributos de monitoreo en un objeto JSON con datos puros. Este método está incorporado a KO y no requiere otro soporte JS. Después de obtener el objeto JSON, envíe una solicitud AJAX para agregar o editar datos. Esto refleja un pozo de enlace bidireccional. Después del valor de todos los cuadros de texto en la interfaz cambia, el cambio de operación. DepartmentModel también se activará.
2.6. Operación de eliminación
No hay nada que decir sobre la operación de eliminación y no tiene nada que ver con KO.
3. Resumen
Lo anterior introduce el uso conjunto de KO y Bootstraptable a través de una simple adición, eliminación, modificación y operación de búsqueda. KO puede liberarte del DOM y concentrarse en ViewModel. Mirando todo el código JS, apenas puede ver el val (), text () y otras operaciones de jQuery para obtener y asignar valores a la interfaz DOM. ¿Se ve limpio y refrescante y de alta gama? Por supuesto, estos pueden ser algunos de los usos más básicos de KO. Después de todo, los bloggers solo han estado aprendiendo KO durante 3 días, y los usos más avanzados deben ser explorados. Cuando te acostumbres en un tiempo, compartirás algunos de sus usos avanzados con todos. Si cree que este artículo puede ayudarlo a comprender el principio de KO y su uso, también podría recomendarlo. ¡El editor lo agradece aquí!
Lo anterior es todo el contenido de la combinación de BootStraptable y KnockoutJS para implementar la función de adición, eliminación, modificación y búsqueda [2]. ¡Espero que sea útil para todos!