En el artículo anterior de la serie de aprendizaje KnockoutJS (I) de KO, se mencionó que el método de enlace de enlace de datos de datos = "xx: oo" en KO no solo puede unir texto, valor, etc., sino también vincular los atributos visibles, estilo y otros atributos de apariencia, clic, textInput y otros eventos, e incluso flujo del programa de control. Varios paquetes elegantes definitivamente satisfarán tu fantasía.
El siguiente habla brevemente sobre el uso de varios enlaces, que se dividen principalmente en tres tipos: representación, proceso e interacción de acuerdo con las propiedades unidas.
Atributos de rendimiento
Los atributos vinculantes de la clase de presentación incluyen visible, texto, html, CSS, estilo y attr. A excepción de la clase de que CSS representa CSS, todo lo demás es fácil de entender. Por supuesto, el nombre de estilo debe ser consistente con JS, y debe eliminarse, cambiado a nombres de camellos, como se muestra a continuación:
< ProfitWarning: currentProfit () <0} "> CSS Class Binking Prueba </div> <div Data-bind =" Style: {color: currentProfit () <0? { shouldShowMessage: ko.observable(true), // Message initially visiblemyMessage: ko.observable(), // Initially blankdetails: ko.observable(), // Initially blankcurrentProfit: ko.observable(150000), // Positive value, so initially we don't apply the "profitWarning" classcurrentProfit: ko.observable (150000), // valor positivo, por lo que inicialmente blackurl: ko.observable ("año-end.html"), urltitle: ko.observable ("informe que incluye estadísticas finales de fin de año")}; ko.applybindings (ViewModel); // Aplicar enlacesEl efecto es así:
Como se menciona en el artículo anterior, además de los atributos individuales de XXOO, también puede pasar objetos JSON, es decir, puede combinar atributos de unión, como:
<!-código html-> <div data-bind = "{visible: debería showmessage, text: mymessage, css: {beneficiowarning: currentProfit () <0}}"> Verá este mensaje solo cuando "debería showmessage" tiene un valor real. </div>Por supuesto, el efecto es así:
La configuración de la clase de presentación es relativamente simple. Una cosa a tener en cuenta es que muchas clases de presentación no necesitan cambiarse dinámicamente. En este momento, puede usar la configuración de ViewModel para lograr la inicialización centralizada de los datos, pero no los establece en observables, como:
// JS CodeVar ViewModel = {debería showshowmessage: ko.observable (true), // mensaje inicialmente visiblemysage: 'Este texto no requiere actualización dinámica' // inicialmente en blanco};Atributos de la clase de proceso
Las clases de procesos incluyen foreach, si, IfNot, con y enlaces de "componentes" más avanzados. Si y IfNot son similares a Visibles. La diferencia es: si eliminará directamente los componentes correspondientes del DOM, mientras que visible solo controla la pantalla oculta, y los componentes aún están en el DOM. con tiene el mismo efecto que en JS, que es extender la cadena de alcance. En términos simples, es agregar un 'prefijo'. antes de la variable. Aquí solo presentaré foreach, y el componente se coloca junto con la unión de la plantilla.
Mira el código:
< href = "#" data-bind = "hacer clic: eliminar"> eliminar </a> </li> </ul> <input type = "button" data-bind = "haga clic: addPeople" value = "add"/> var listModel = function () {// Establecer el valor de la matriz de personas (las personas en realidad es una flecha de funciones). Use foreach para atravesar el objeto de matriz // ul, Li corresponde a los hijos de personas y personas. Por lo tanto, al vincular internamente Li, el alcance está en el niño de las personas {nombre ...}. Para llamar a las personas de remove a las personas fuera de las personas, se requiere $ parent // si se llama eliminar internamente, esto en eliminar es {nombre ...} correspondiente al elemento LI actual, y el alcance es el dominio actual, no se requiere $ parent. this.people = ko.observableArray ([{name: "Mark Zake", remover: function () {that.people.remove (this); // Tenga en cuenta el objeto actual (que es {name ...}) y alcance. No te preocupes por las etiquetas HTML, la comprensión de JS pura es simple}}, {nombre: "James lebo", remo {that.people.remove (this);}}, {nombre: "Green Deny", eliminar: function () {that.people.remove (this);}}]); // adpeople llama al método del mismo nivel de personas internamente. Esto cambiará, y esto debería guardar por adelantado y pasar en. Lo que desea ejecutar es listmodel.people.remove (a.parent) this.removePeople = function () {that.people.remove (this);}}; ko.applybindings (new ListModel ());Lo que es más fácil de meterse aquí es la correspondencia jerárquica entre el nodo DOM y el Modelo View. Primero, aplique foreach vinculante en UL, es decir, cada Li corresponde a cada niño de personas. Después de que esto corresponde a él, puede entenderlo de acuerdo con las reglas de alcance de JS. Hablando de alcance, tengo que mencionar esto. Como dice el dicho, trato esto como si fuera mi primer amor, y esto me engañó miles de veces. Aquí, XiaoJia agregó una función de eliminación a la versión oficial, que es fácil de corresponder con el remoje oficial. En cuanto a variables como $ índice y $ parent, solo compruélvalos literalmente.
Atributos de la clase de interacción
Finalmente, es hora de conseguir el punto. La razón más importante para usar KO es lidiar con el problema dinámico de presentación de la interfaz de usuario interactiva. Aquí introduciremos algunos enlaces relacionados con los formularios.
(1) Haga clic en Binding
Sintaxis: Data-bind = "Haga clic: ClickHandler". La función Hlawhandler aquí puede ser cualquier función, no necesariamente una función en el modelado ViewModel, siempre que se pueda hacer referencia. Hay algunas cosas a tener en cuenta sobre el evento de clic:
1. Pase de parámetro, KO pasa el componente actual como el primer parámetro a la función ClickHandler de forma predeterminada. Presta atención al contexto vinculante actual aquí. Por ejemplo, en el entorno con el entorno, el componente devuelto se convertirá en el componente en lugar del componente actual que desea. Si también necesita pasar el parámetro del evento, pase el evento como el segundo parámetro. Si necesita pasar más parámetros, debe envolverlo con una función. como:
<botón data-spind = "haga clic: función (datos, evento) {myFunction ('param1', 'param2', data, event)}"> Haga clic en mí </botón>2. Configuración del comportamiento predeterminado (como enlaces)
KO está prohibido por el comportamiento del evento predeterminado, y generalmente unimos eventos de clic para enlaces y no les permitiremos saltar. Sin embargo, si tiene que habilitarlo, simplemente devuelva verdadero en ClickHandler.
3. Burbuja
KO puede burbujear por defecto. Puede configurar el evento de clics no para burbujear con data-bind = "Click: ClickHandler, ClickBubble: False".
(2) Enlace de eventos
KO proporciona esta interfaz para que los usuarios personalicen eventos vinculantes. Con respecto al paso de los parámetros, el comportamiento predeterminado, el burbujeo, etc., lo mismo que el enlace de clic, el caso de uso:
<div><div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">Mouse over me</div><div data-bind="visible: detailsEnabled">Details</div></div><script type="text/javascript">var viewModel = {detailsEnabled: ko.observable(false),enableDetails: function() {this.DetailSenabled (true);}, DISCABLEDELA: function () {this.DetailSenable (falso);}}; ko.applyBindings (ViewModel); </script>(3) Enviar vinculación
Se usa principalmente para hacer un trabajo de verificación. KO bloqueará la acción del formulario de envío predeterminada y transferirá a la función de envío límite. Cuando necesite enviar en el futuro, devuelva verdadero en el evento vinculante.
PD: ¿Por qué no usar eventos de clic en el formulario para manejarlo? Debido a que el envío está diseñado originalmente para manejar eventos de envío, también puede aceptar acciones de envío como el retorno de transporte, pero haga clic.
(4) El valor está vinculado a TextInput
El valor de enlace y la entrada text en el cuadro de entrada se ven similares, pero se recomienda usar el evento TextInput para el enlace, porque TextInput es uno nuevo que se usa específicamente para manejar los eventos de entrada. Como puede ver en el artículo anterior, cuando se usa la entrada de enlace de valor (izquierda), el enfoque debe moverse fuera del cuadro de entrada antes de que se actualice, mientras que TextInput (derecha) se actualiza de inmediato.
Aunque la unión del valor también puede lograr el mismo efecto que TextInput configurando Data-Bind = "{Value: Price, ValueUpdate: 'AfterKeydown'}", esto no es tan compatible con TextInput en el navegador.
(5) Opciones de enlace (selectionOptions)
En la lista desplegable, se pueden usar opciones para vincular el valor del niño. El niño puede ser una cadena o un objeto JS. El artículo anterior ([Knockoutjs Learning Experience Journey] (1) KO Primera experiencia) muestra cuerdas, y esta vez pasaré un objeto:
Código:
<p> Su país: <select data-bind = "Opciones: DisponibleCountries, opción de texto: 'CountryName', Value: SelectedCountry, Opciones Caption: 'Elija ...'"> </elect> </p> <div Data-bind = "Visible: SelectedCountry"> <!-Aparece cuando selecciona algo-> ha elegido un país con la población <span data-bind = "text: selectioncountry ()?)? selectionCountry (). CountryPoPulation: 'desconocido' "> </span>. </div> <script type =" text/javaScript "> // constructor para un objeto con dos propiedades de propiedades = function (nombre, población) {this.countryName = name; this.countryPopulation = población;}; var ViewModel País ("Reino Unido", 65000000), New Country ("USA", 320000000), New Country ("Suecia", 29000000)]), SelectedCountry: ko.observable () // nada seleccionado por defecto}; ko.applybindings (ViewModel); </script>Aquí hay una opción para vincular la opción de cuadro de lista, y se usa un valor para vincular el elemento seleccionado. Dado que las opciones son objetos JS, debe usar una opción para especificar la pantalla en el cuadro de lista. OppectionCaption se refiere al valor de visualización predeterminado cuando no se selecciona ningún elemento. Si establecemos un cuadro de lista multiselecto, entonces no podemos usar el valor para vincular los elementos seleccionados. En este momento, se deben usar selectOptions para vincular elementos seleccionados.
(6) Otros enlaces: habilitar/deshabilitar, hacerfocus, verificar, uniquename.
Estos eventos son muy simples de usar, por lo que no los presentaré en detalle. El último nombre uniquen se usa para establecer el atributo de nombre único del control de formulario. Cuando el formulario se envía al fondo, no se enviará al fondo sin establecer el valor del atributo de nombre, por lo que existe una función de enlace de este tipo. Hay otro efecto relativamente común en HasfoUcus en el sitio web oficial:
Nombre:
Nombre: Bert Bertington
Haga clic en el nombre para editarlo; haga clic en otro lugar para aplicar cambios.
Hacer clic en el nombre de arriba puede volverse editable, y luego perder el enfoque y luego convertirse en texto ordinario. Este efecto es bastante simple de implementar con KO.
Resumir
Este artículo presenta principalmente los métodos de uso de varias fijaciones en knockoutjs . Usando la combinación de estos métodos de enlace, simplemente puede crear una página de UI que requiera interacciones más dinámicas. Lo más importante para usar estos métodos es recordar que todos los enlaces son objetos de función, por lo que puede operar directamente en HTML, para que la estructura del código JS a veces pueda ser más simple.
Tutorial oficial: http://knockoutjs.com/documentation/introduction.html