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. Introducción a Knockout.js
1. Knockout.js y MVVM
Hoy en día, varios marcos frontales son abrumadores y deslumbrantes. A veces tengo que suspirar eso, como programador es realmente difícil, siempre hay técnicas infinitas que aprender. ¿Cuándo terminará, a menos que se transforme! ¡El mar del sufrimiento es ilimitado, y si es la orilla cuando miras hacia atrás depende de ti!
Knockout.js es un marco frontal ligero basado en el modo MVVM. ¿Qué tan ligero es? Según la última versión v3.4.0 que se muestra en el sitio web oficial, es de solo 22 kb. Puede manejar el enlace entre el modelo de datos y la interfaz DOM de manera amigable. Lo más importante es que su vinculación es bidireccional. Es decir, si el modelo de datos cambia, los datos en la interfaz DOM también cambiarán en consecuencia. Por el contrario, si los datos en la interfaz DOM cambian, el modelo de datos también cambiará en consecuencia. Esto puede reducir en gran medida la cantidad de nuestro código frontal y hacer que nuestra interfaz sea fácil de mantener, y ya no tenemos que escribir muchos modelos de datos de monitoreo de eventos y cambios DOM de interfaz. El blogger ilustrará estos dos puntos basados en un ejemplo de uso a continuación.
Sitio web oficial de knockout.js: http://knockoutjs.com
Dirección de código abierto de knockout.js: https://github.com/knockout/knockout
Modo MVVM: este es un modelo de diseño para crear interfaces de usuario. MVVM lo divide en tres piezas, a saber, el modelo, la vista y la vista de la vista, el modelo es el modelo de datos, la vista es nuestra vista, y ViewModel es un modelo de vista, utilizado para vincular el modelo de datos y los elementos DOM en la vista. Si ha usado WPF y Silverlight, comprender esto no debería ser un problema; No es un problema no haberlo usado. Después de leer este artículo, tendrá una comprensión general.
2. El ejemplo más simple
En términos generales, si usa knockout.js desde cero, debe hacer al menos las siguientes cuatro partes
2.1. Vaya al sitio web oficial para descargar el archivo knockout.js y luego cotizarlo en la página Ver.
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script>
Nota: Knockout.js no requiere soporte de jQuery. Si su proyecto requiere operaciones relacionadas con jQuery, consulte jQuery; De lo contrario, solo haga referencia a los archivos anteriores.
2.2. Definir ViewModel
¿Qué es ViewModel? De hecho, en JS, parece un objeto JSON. Definimos un Modelo View:
var myViewModel = {nombre: "lilei", profesión: "ingeniero de software",};2.3. Defina la etiqueta que une los datos de la vista en la vista de la vista
<iv> name: <etiqueta data-bind = "text: name"> </label> <br /> profesión: <input type = "text" data-bind = "textInput: profesión" /> </div>
Nota: Se requiere TextInput para el texto correspondiente a las etiquetas de entrada, mientras que se requiere texto para el texto para etiquetas ordinarias.
2.4. Activar la unión
Después de hacer los tres pasos anteriores, también debe activar la unión de Knockout
ko.applybindings (myViewModel);
Al hacer estas cuatro partes, el enlace de datos ViewModel más simple se implementa básicamente. Obtenga el efecto:
Si es lo suficientemente cuidadoso, encontrará que el método Ko.AplyByBindings () tiene dos parámetros. El primero es el ViewModel que necesitamos unir, y ¿cuál es el segundo? De ko.applybindings (myViewModel); Podemos ver que el segundo parámetro es un parámetro opcional, que representa el alcance de la etiqueta unido al Modelo View. Por ejemplo, cambiemos el código anterior:
<div> name: <etiqueta id = "lb_name" data-bind = "text: name"> </label> <br /> profesión: <input type = "text" data-bind = "textInput: profesión" /> </div> ko.applybindings (myViewModel, document.getElementById ("lb_name"));Obtenga el resultado:
A partir de esto, podemos ver que el segundo parámetro define el alcance de acción de myViewModel, es decir, solo unir en la etiqueta de id = "lb_name" entrará en vigencia. Si el segundo parámetro es una etiqueta de contenedor como Div, significa que el alcance de la unión es todo sub-etiquetado debajo del DIV.
3. Atributos de monitoreo
A partir de los cuatro pasos anteriores, no podemos ver ningún efecto. Lo que vemos no es más que vincular los datos de un objeto JSON a la etiqueta HTML. ¿Cuál es el punto de hacer esto? ¿No complica problemas simples? ¡No se preocupe, presencie el milagro de inmediato! Como se mencionó anteriormente, el significado más importante del nocaut se encuentra en la unión bidireccional. Entonces, ¿cómo lograr nuestra vinculación bidireccional? La respuesta es monitorear los atributos.
En Knockout, hay tres atributos de monitoreo en el núcleo: Observables, OBSERVABLES DEPENDENTES, ObservableArray. El significado de observación se traduce como observación y observación. Si se siente inapropiado decir que es un atributo de observación o un atributo de observación, lo llamaremos un atributo de monitoreo por el momento.
3.1. Observables: Propiedades de monitoreo
Cambiemos el ejemplo anterior a esto:
<Head> <Meta name = "Viewport" Content = "Width = Device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <body> <div> name: <selet data-bind = "text: name"> </label> <br/> profesión: <input type = "text" data-bind = "textInput: profesión"/> </div> <div> <input type = "text" id = "txt_testobServable"/> </siv> <script type = "text/javaScript"> // 1.Define ViewModelvar myViewModel = {name: ko.observable ("lilei"), profesión: "ingeniero de software",}; // 2. Active el enlace ko.applyBindings (myViewModel); $ (function () {// registrar el evento de texto $ ("#txt_testobservable"). On ("input", function () {myViewModel.name ($ (this) .val ());});}); </script> </body>El significado de esta oración es agregar la propiedad de nombre de ViewModel a una propiedad de monitoreo. La propiedad de nombre debe convertirse en una propiedad de monitoreo. Sucederá algo mágico. Echemos un vistazo cuando escribamos myViewModel.:
El nombre ha cambiado de la propiedad original a un método, es decir, una vez que se agrega ko.observable (), la propiedad correspondiente se convertirá en un método. Por lo tanto, el valor y la asignación de nombre deben manejarse usando myViewModel.name (). Echemos un vistazo al efecto:
Duda del código: es obvio que myViewModel.name ($ (this) .val ()); Esta oración asigna el valor del cuadro de texto actual a la propiedad de nombre. Dado que la interfaz vincula la propiedad de nombre, el valor en la etiqueta también cambia en consecuencia. O diría que esto se puede hacer usando el evento TextChange. Mientras se asigne el valor del cuadro de texto actual a la etiqueta de la etiqueta, se puede lograr este efecto, que no es nada. De hecho, su método de escritura también puede lograr el propósito, pero la importancia de nuestro atributo de monitoreo es que cuando el valor del nombre se cambia en cualquier lugar, la interfaz cambiará en consecuencia, sin asignar valores a las etiquetas de la etiqueta en cada lugar. En JS, solo necesitas concentrarte en myViewModel.name (). ¿No es muy impresionante ~~
3.2. Dependientes OBServables: Propiedades de dependencia del monitor
Si ha leído los atributos de monitoreo anteriores, ¿aún no está satisfecho? Echemos un vistazo al uso de atributos de dependencia de monitoreo.
Cambiemos el código y echemos un vistazo:
<HEAD> <Meta name = "Viewport" Content = "Width = Device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> </script> <div> n. data-bind = "textInput: name" /> <br /> profesión: <input type = "text" data-bind = "textInput: profesión" /> <Br /> /> Descripción: <etiqueta data-bind = "text: des"> < /etiqueta> < /div> <script type = "text /javascript"> // 1.definition ViewModelvar myViewModel = {name: ko.observable ("lilei"), profesión: ko.observable ("ingeniero de software"),}; myViewModel.des = ko.dependentObServable (function () {return "I'm Named -" + myViewModel.name () + ", ocupación -" + myViewModel.Profession ();});//2. Active el Ko.AplyBindings de enlace (myViewModel); </script> </body>Echemos un vistazo al efecto:
Duda del código: al agregar el atributo de dependencia de monitoreo Ko.dependentObServable (), el valor del atributo DES se puede monitorear al mismo tiempo a los cambios en el nombre y al profesor. Si alguno de ellos cambia, la etiqueta de Bound desencadenará el cambio. La mayor ventaja de esto es evitar el problema de operar el DOM de JS, lo cual es interesante.
3.3. ObservablearRay; matrices de monitor
Además de los dos anteriores, KO también admite el monitoreo de objetos de matriz. Echemos un vistazo a un ejemplo:
<Head> <Meta name = "Viewport" Content = "Width = Device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> </shed <body <body <body <diviv data-bind = "Options: DePTarr, opcionstext: 'name'"> </select> </div> <div> <input type = "text" id = "txt_testobservable"/> <input type = "botón" id = "btn_test" valor = "nuevo departamento"/> </div> <script type = "text/javaScript> var depTarr = ko.obserBserBserRArtan Nombre: 'Departamento de R&D'}, {id: 2, nombre: 'Departamento administrativo'}, {id: 3, nombre: 'Departamento de Affaes Human'}]); var ViewModel = {deTptarr: DePTarr,}; Ko.ApplyBindings (ViewModel); var i = 4; $ (function () {$ ("#btn_test"). On ("," "," ","), "). {Deptarr.push ({id: i ++, nombre: $ ("#txt_testobservable"). val ()});});}); </script> </body>Mira el efecto:
Duda del código: el método anterior ko.observableArray () agrega monitoreo de los objetos de matriz. Es decir, en cualquier lugar de JS, siempre y cuando los cambios en la matriz se realicen en el objeto de matriz de Deptarr, la interfaz de usuario se activará para dar el correspondiente. Una cosa a tener en cuenta es que la matriz de monitoreo es en realidad el objeto de matriz monitoreado en sí, y no se puede controlar los cambios en las propiedades del objeto infantil en el objeto de matriz. Por ejemplo, cambiamos el evento de clic a esto:
$ (function () {$ ("#btn_test"). on ("hacer clic", function () {deptarr [1] .name = "aaa";});});Efecto:
Esto muestra que el monitoreo de la matriz en realidad monitorea el objeto de matriz en sí, y no monitoreará los cambios en los atributos de elementos en la matriz. Si realmente necesita monitorear los cambios de propiedad de los objetos en los datos, debe usar ko.observable () para la propiedad de los objetos en los datos, y los dos se usan juntos. Si está interesado, puede probarlo.
4. Atributos comunes de unión a datos en KO
En lo anterior, utilizamos múltiples atributos de unión a datos, entonces, ¿cuántos de estos atributos de unión a datos hay en Knockout? Aquí enumeramos algunas propiedades de uso común.
4.1. Texto y InputText
El texto, como su nombre lo indica, significa texto. Este atributo de enlace generalmente se usa para mostrar texto con etiquetas como <label>, <span>, <div>, etc. Por supuesto, si lo desea, este enlace se puede usar para cualquier etiqueta. Básicamente no es nada que decir sobre usarlo. Si no se usa ko.observable (), es una unión estática, de lo contrario es una unión dinámica.
InputText, el texto de la etiqueta de entrada, es equivalente al atributo de valor de la etiqueta de entrada.
<div> name: <etiqueta data-bind = "text: name"> </label> <br/> profesión: <input type = "text" data-bind = "textInput: profesión"/> </div> //1.define ViewModelvar myViewModel = {name: ko.observable ("lilei"), profesión: "ingeniero de software",}; // 2. Activar la vinculación ko.applybindings (myViewModel);4.2. Valor
Esta propiedad de enlace generalmente se usa para etiquetas de entrada, que es básicamente similar al InputText anterior. Pero el valor está más estandarizado.
También se usa con valor un parámetro valorupdate, que indica qué operación hace la interfaz cuando se actualiza el valor. Los valores principales de ValueUpdate incluyen cambiar/keyup/keyPress/Aftokeydown, etc. Indica el valor del modelado View correspondiente al valor cuando cambia el texto, la reducción del teclado, la presentación del teclado, la presión del teclado, la presión del teclado, etc.
Nombre: <input type = "text" data-bind = "value: name, valueUpdate: 'keyup'" /> <br /> var myViewModel = {name: ko.observable ("lilei"),}; // 2. Activar la vinculación ko.applybindings (myViewModel);El código anterior indica que el atributo de valor del cuadro de texto y el atributo de nombre de myViewModel se actualizan cuando el teclado está cerrado.
4.3. Comprobado
La unión marcada generalmente se usa para la casilla de verificación, la radio y otros elementos de formulario que se pueden seleccionar, y su valor correspondiente es de tipo bool. El uso del valor es básicamente similar, por lo que no lo repetiré.
4.4. permitir
Habilitar la unión generalmente se usa para habilitar elementos de etiqueta, y generalmente se usa para habilitar y deshabilitar elementos de formulario. Contrariamente a discapacitados, el valor correspondiente también es de tipo bool.
<div><input type="text" data-bind="enable:IsMen"/></div><script type="text/javascript">//1.Define ViewModelvar myViewModel = {Name: ko.observable("Lilei"),Profession: ko.observable("Software Engineer"),Age: ko.observable (40), ismen: ko.observable (true)}; // 2. Active el Ko.applyBindings de enlace (myViewModel); myViewModel.isman (falso); </script>Dado que la propiedad ISMEN se vuelve falsa, todos los cuadros de texto correspondientes mostrarán un estado deshabilitado.
4.5. desactivado
Contrariamente a habilitar, el uso es similar a la habilitación.
4.6. opción
En lo anterior, las opciones se usaron cuando se usa el enlace SELECT, que representa el conjunto de opciones de la etiqueta SELECT, y el valor correspondiente es una matriz, que representa la fuente de datos de este cuadro desplegable. El monitoreo de esta fuente de datos se puede habilitar utilizando ObservableArray. Ver arriba para su uso.
4.7.html
La vinculación del texto es en realidad la configuración y el valor del innecho de la etiqueta. Del mismo modo, la unión HTML también es la configuración y el valor del interno. Su valor correspondiente es una etiqueta HTML.
4.8. CSS
La unión de CSS es agregar o eliminar uno o más estilos (clases) al elemento DOM. Use formato:
<style type = "text/css">. testBold {background-color: powderblue;} </style> <div data-bind = "css: {testBold: myViewModel.name () == 'lilei'}"> aaaa </div> var myViewModel = {name: ko.observable ("lilei", profesión "). Ingeniero "), edad: ko.observable (40)};Este DIV mostrará el color de fondo.
Si necesita agregar o eliminar múltiples estilos, simplemente cámbielos ligeramente, por ejemplo:
<div data-bind = "css: {testbold: myViewModel.name () == 'lilei', testBorder: myViewModel.profession () == 'php ingeniero'}"> aaaa </div>4.9. Estilo
Si la función de la unión de CSS es agregar o eliminar dinámicamente los estilos de clase a la etiqueta, entonces la función de la unión del estilo es agregar o eliminar dinámicamente un cierto estilo a la etiqueta. Por ejemplo:
<div data-bind = "css: {background-color: myViewModel.name () == 'lilei'? 'rojo': 'blanco'}"> aaaa </div>Si agrega o elimina múltiples, cómo usar CSS Binding
4.10, attr
La unión de ATTR se usa principalmente para agregar y eliminar uno o más atributos (incluidos los atributos personalizados) a la etiqueta, y es similar a CSS.
4.11. Hacer clic
Haga clic en Binking significa agregar un método de ejecución de eventos de clic al elemento DOM correspondiente. Se puede usar en cualquier elemento.
<div> <input type = "button" value = "test click binding" data-bind = "Click: clickfunc" /> </div> var myViewModel = {clickFunc: function () {alert ($ (event.currentTarget) .val ());}}; ko.applybybindings (myViewModel);Event.CurrentTarget representa el elemento DOM actualmente haciendo clic. A veces, por simplicidad, usamos directamente funciones anónimas para vincular, como:
<Div> <input type = "button" value = "test click binding" data-bind = "click: function () {alert ('clicked');}" /> </div>Sin embargo, esta forma de escribir JS en HTML dificulta que los bloggers acepten, y sienten que es relativamente inconveniente de mantener, especialmente cuando la lógica en el evento de clics es un poco complicada. Por lo tanto, si no es necesario, no se recomienda escribir esta función anónima directamente.
4.12. Otros
Para todos los enlaces de la unión de datos, puede ver la introducción en el sitio web oficial, y no los enumeraré uno por uno aquí. Cuando lo necesite, simplemente vaya al sitio web oficial para verlo. Eche un vistazo a todos los enlaces que figuran en el sitio web oficial:
5. Transformación y relación entre los objetos JSON y los atributos de monitoreo
Sabemos que para evitar métodos de presentación directa en diferentes idiomas, en general, utilizamos datos de formato JSON al interactuar con el front-end y el back-end. Utilizamos el modelo de datos recuperado del back-end a través de las solicitudes HTTP. Para usar algunas de las características de nuestros KO, debemos convertir estos modelos de datos ordinarios en los atributos de monitoreo de KO; Por el contrario, utilizamos los atributos de monitoreo de KO, y a veces necesitamos convertir estos atributos en datos JSON ordinarios y pasarlos al fondo. Entonces, ¿cómo lograr esta conversión?
5.1. Convertir el objeto JSON a ViewModel
Por ejemplo, tomamos un objeto JSON desde el fondo, luego lo convertimos en nuestro modelado y luego lo vinculamos a nuestra interfaz DOM.
$ .AJAX ({url: "/home/getData", type: "get", data: {}, éxito: function (data, status) {var ojson = data;}});Enviamos una solicitud al backend, tomamos un objeto JSON, asignamos un valor a Ojson y luego convertimos el OJSON en ViewModel. La forma más intuitiva es convertirlo manualmente. Por ejemplo, podemos hacer esto:
var myViewModelJson = {DeptName: Ko.observable (), DeptLevel: Ko.observable (), DeptDesc: Ko.observable ()}; Ko.applyBindings (myViewModelJson);Luego en el éxito solicitado por AJAX
éxito: función (datos, estado) {var ojson = data; myViewModeljson.deptname (ojson.deptname); myViewModeljson.DepteLevel (Ojson.Detplevel); MyViewModeljson.DepTdesc (Ojson.Deptdesc);}De esta manera, a través de la unión manual, se realiza la unión del objeto JSON al modelado ViewModel. La ventaja de hacer esto es flexibilidad, la desventaja es obvia, la cantidad de código manual es demasiado grande.
Afortunadamente, con nuestro código abierto universal, siempre hay personas que tienen una mejor manera. Podemos usar el componente Knockout.mapping para ayudarnos a convertir la interfaz JSON Object a ViewModel.
knockout. Mapping Dirección de código abierto: Descargar
Echemos un vistazo brevemente cómo se usa o el ejemplo anterior. No necesitamos implementar la definición de ningún model de vista. Primero, debemos referirnos a knockout.mapping.js
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping --latest.js"> </script>
NOTA: Aquí Knock.mapping-latest.js debe colocarse detrás de Knockout-3.4.0.min.js, de lo contrario, no se puede llamar a Ko.mapping.
Luego úselo directamente en la función de éxito
éxito: función (datos, estado) {var myViewModeljson2 = ko.mapping.fromjs (data); ko.applyBindings (myViewModelJson2);}Veamos el efecto:
Duda del código: el objeto JSON recuperado desde el fondo a través de la solicitud AJAX se convierte convenientemente en ViewModel a través de Ko.Mapping.FromJS (). ¿No es agudo? Por supuesto, además de este uso, también puede actualizar el ViewModel existente y usarlo de la siguiente manera:
var myViewModeljson = {de departamento: ko.observable (), de departamento: ko.observable (), deTptDesc: ko.observable ()}; ko.applyBindings (myViewModelJson); $ (function () {$ .AJAX ({url: "/home/getData", type: ", dats (dats () {$ .Jajax ({url:"/home/getData ", type:", dats (dats () {$ .Jajax ({url: "/home/getData", type: ", dats (dats () {$ .Jajax ({url:"/home/getData ", type:" get ", dats, dats, dat. {}, éxito: function (data, status) {ko.mapping.fromjs (data, myViewModelJson)}});});En el éxito, actualice el Modelo ViewModel de MyViewModeljson de acuerdo con el valor de los datos.
5.2. Convertir ViewModel a JSON Object
Lo mencionado anteriormente que los objetos JSON se convierten en ViewModel, entonces, ¿qué debemos hacer si necesitamos convertir el Modelo ViewModel a objetos JSON y pasarlo al backend?
Hay dos métodos proporcionados en Knockout:
• Ko.ToJS (): Convertir ViewModel a JSON Object
• Ko.ToJson (): Convertir ViewModel en cadena JSON serializada.
Por ejemplo, nuestro código es el siguiente:
$ (function () {var ojson1 = ko.tojs (myViewModeljson); var ojson2 = ko.tojson (myViewModelJson);}); var myViewModelJson = {de dePtname: ko.observable ("departamento de r & d"), deptlevel: ko.observable ("" 2 "), detepted ko.observable ("grupo de desarrollo")}; ko.applybindings (myViewModeljson);Luego monitoreemos los valores de OJSON1 y OJSON2:
Duda del código: a través de la imagen de arriba, es fácil entender la diferencia entre los dos métodos. Cabe señalar aquí que estos dos métodos están integrados en KO y no requieren el soporte del componente de mapeo.
6. Cree su propio atributo de unión a datos
He hablado mucho más arriba, e introduciré un poco de vínculo y monitoreo en Knockout. Entonces, a veces, necesitamos personalizar nuestro enlace de datos, como: <etiqueta data-spind = "mybind: name"> </selt>. Este requisito es especialmente útil al encapsular componentes. ¿Se puede implementar? seguro.
En Knockout, se proporciona la propiedad Ko.BindingHandlers para personalizar la propiedad de unión a datos. Su sintaxis es la siguiente:
ko.bindinghandlers.myselect = {init: function (element, valueAcCessor, allbindingsAccessor, ViewModel) {}, Update: Function (Element, ValueAcCessor, AllBindingSacCessor, ViewModel) {}};Simplemente declara así, y luego puede usar datos de datos personalizados en nuestra etiqueta HTML.
<Div> <Seleccionar data-bind = "myselect: $ root"> <opción id = "1"> Departamento de I + D </opción> <opción id = "2"> Departamento de asuntos humanos </opción> <opción id = "3"> Departamento administrativo </opción> </select> </div>
MySelect es nuestra propiedad vinculante personalizada. $ root puede entenderse como inicialización por el momento (aunque esta explicación no es rigurosa, si hay una explicación más razonable, no dude en corregirla).
Duda del código: los Ko.BindingHandlers anteriores se pueden usar para implementar las propiedades de enlace personalizadas. Deben explicarse dos puntos:
• Init, como su nombre lo indica, inicializa la unión personalizada. Contiene múltiples parámetros. Los dos primeros parámetros generalmente se usan con más frecuencia. El primer parámetro representa el elemento DOM que inicializa la unión personalizada, y el segundo parámetro generalmente se usa para pasar los parámetros inicializados.
• Actualizar, actualizar la devolución de llamada, cuando cambie el atributo de monitoreo correspondiente, se ingresará este método. Si no se requiere devolución de llamada, este método puede ser no declarado.
Aquí, el blogger explicará brevemente el uso de enlaces personalizados basados en un componente desplegable Mutiselect que había compartido.
6.1. El más simple mutiselecto
En términos generales, si necesitamos usar KO para encapsular algunos componentes generales, necesitamos usar nuestros Ko.BindingHandlers. El blogger discutirá cómo usarlo en combinación con el componente Mutiselect.
Primero declare los Ko.BindingHandlers personalizados e inicialice nuestra etiqueta de selección en el método init
ko.bindinghandlers.myselect = {init: function (element, valueAcCessor, AllBindingSacCessor, ViewModel) {$ (Element) .MultisElect ();}, Update: Function (Element, ValueAcCessor, AllBindingSacCessor, ViewModel) {}};Luego úsalo en la etiqueta de la página
<div style = "text-align: center;"> <select data-bind = "myselect: $ root"> <opción id = "1"> departamento de I + D </opción> <opción id = "2"> Departamento de asuntos humanos </ppection> <opción id = "3"> Departamento administrativo </opción> </select> </liv>
La última tercera parte, active la unión
$ (function () {var multiselect = {}; ko.applyBindings (multiselect);});Si no necesita pasar los parámetros, solo necesita unir un Modelo View View. Algunas personas están perplejas, pero la tercera parte no siente que sea práctico. La comprensión del blogger es que el elemento DOM necesita usar los datos para vincular datos, y KO Binking debe estar habilitado, que es Ko.AplyBindings () aquí.
Obtenga el efecto:
6.2. Pase de parámetros
El primer paso es personalizar Ko.BindingHandlers
ko.bindinghandlers.myselect = {init: function (element, valueAcCessor, allBindingSacCessor, ViewModel) {var Oparam = valueAcCessor (); $ (elemento) .MultisElect (oparam);}, actualización (element, elemento, valueAcCessor, AllBindingSaccessor, ViewModelel)};El segundo paso es el mismo que el anterior, use este enlace personalizado en la etiqueta HTML.
Paso 3: pasar en parámetros cuando active el enlace
$ (function () {var multiselect = {enableClickableOptGroups: true, // colapse agrupando onChange: function (opción, comprobado) {alerta ("seleccionar cambio");}}; ko.applyBindings (multiselect);});A través de estos tres pasos, puede pasar los parámetros a la inicialización de nuestro Mutiselect:
Consultas de código: el segundo parámetro del evento Init, dijimos, su función principal es obtener los parámetros transmitidos desde nuestro Modelo View, pero aquí necesitamos usarlo como un método. ¿Por qué se usa tanto restos por estudiar!
2. El primer ejemplo de agregar, eliminar, modificar y buscar
En este punto, las cosas básicas finalmente se han presentado. Originalmente planeé completarlos en un artículo, ¡pero no esperaba que las cosas básicas se ampliaran tanto! Los ejemplos de agregar, eliminar, modificar y verificar se incluyen en el próximo artículo. BootStraptable y KnockoutJs se combinan para realizar la función de agregar, eliminar, modificar y verificar [2]. ¡Bienvenido a aprender y comunicarse, y por supuesto también puede recomendarlo!