Knockout En Español 513sx

ed by: Luis Arrieta
0
0

April 2022
PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 3i3n4

Overview 26281t

& View Knockout En Español as PDF for free.

More details 6y5l6z

Words: 1,821
Pages: 8

Knockout.js Hagamos nuestro primer ejemplo, para ello construyamos una simple página html con el siguiente código: <meta charset="utf-8" /> Primer ejemplo de KnockoutJS 5o6f1d <script src="knockout-2.2.1.js"> Nombre: Primer apellido

Su nombre completo es <span data-bind="text: nombreCompleto" /> <script> function ViewModel() { var self = this; self.nombre = "Rubén"; self.apellido = "Spagnuolo"; self.nombreCompleto = ko.computed(function () { return self.nombre + ' ' + self.apellido; }); } // Activamos knockout.js ko.applyBindings(new ViewModel());

Si bien este es un ejemplo muy sencillo, podemos ver ya la estructura de una página hecha con KnockoutJS: Vemos que nuestros elementos html tienen el atributo data-bind. En el caso de los dos input type=text usamos el binding value y en el caso del span usamos el binding text El binding value enlaza el atributo value del elemento del DOM (en nuestro caso, los dos input type=text) con una propiedad en nuestro view model. Esto es tipicamente usados con elementos como , <select> y

nombre, asignándole el valor "Rubén"



apellido, asignándole el valor "Spagnuolo"



nombre completo que definimos como un computed observable o sea una función que depende de uno o más propiedades (en nuestro caso de las dos anteriores: nombre y apellido) y que se actualizan automáticamente cuando una de sus dependencias cambia.

Como vemos en la figura 1, al correr la página obtenemos la salida esperada, es decir, en el span se escribe el nombre completo:

Figura 1 - Salida de la pagina al ser vista con Internet Explorer Sin embargo, tal como está hecha nuestra primera página, si editamos el nombre y el apellido, veremos que el nombre completo no cambia.. y esto.. ¿ a qué se debe?: La respuesta es que en nuestro ViewModel hemos definido tanto a nombre como a apellido como una variable normal.. Para que se haga la magia del binding, debemos cambiar el código de nuestras dos propiedades para definirlos usando dos observables como sigue: self.nombre = ko.observable("Rubén"); self.apellido = ko.observable("Spagnuolo"); y el código de nuestra propiedad nombre completo como sigue: self.nombreCompleto = ko.computed(function () { return self.nombre() + ' ' + self.apellido; }); Un observable es un tipo especial de objeto JavaScript que puede notificara los suscriptores acerca de los cambios, y puede automáticamente detectar dependencias. Como se ve, cuando hacemos referencia a una propiedad observable la debemos llamar como a una funcion, es decir con los paréntesis: self.nombre() Ahora al cambiar los valores de los dos input text, y perder el foco, vemos que el texto del span cambia de acuerdo con los cambios, como se ve en la figura 2:

Figura 2 - Al cambiar el nombre y/o el apellido, y perder el foco, el texto del span cambia.

Activando KnockoutJS: como vemos en el código de nuestro script, al finalizar el mismo, debemos activar KnockoutJS para que se produczca el binding con nuestro ViewModel. Esto lo hacemos con el código siguiente: ko.applyBindings(new ViewModel());

descargas Obtener la versión más reciente producción estable de Knockout.js:

Descargar v3.4.2 - min 25kb + gz

notas de la versión También disponible: generación de depuración . Nota: Esto sólo se diseñó para ayudarle a entender cómo funciona el golpe de gracia. No lo utilice para el desarrollo normal de aplicación, ya que expone las API privadas sin soporte adicional.

Cenador Knockout está disponible a través de la glorieta gestor de paquetes. Más información sobre el uso y la instalación de Bower en http://bower.io . Para añadir golpe de gracia a su aplicación, puede ejecutar: bower install knockout Además, puede incluir la --saveopción de añadir nocaut a su bower.jsonarchivo.

Instalación Basta con hacer referencia al archivo JavaScript utilizando una <script>etiqueta en alguna parte de sus páginas HTML. Por ejemplo, <script type='text/javascript' src='knockout3.4.2.js'> Por supuesto, actualizar el srcatributo para que coincida con el lugar donde se coloca el archivo descargado. A continuación, si usted es nuevo en nocaut, empezar con los cursos interactivos , ver algunos ejemplos en vivo , o cavar en la documentación sobre los observables .

Redes de distribución de contenidos (CDN) Para dar a sus s la mayor velocidad de descarga, en su lugar podría preferir hacer referencia knockout.jsa uno de los siguientes CDN de terceros:  CDNJS ( sobre )  Versión 3.4.1 nocaut  Microsoft Ajax CDN ( aproximadamente )



Versión 3.4.1 nocaut

Archivo de todas las versiones                                   

v3.4.2 ( depuración ) - 6 de marzo de, 2017 v3.4.1 ( depuración ) - 7 de noviembre el año 2016 v3.4.0 ( depuración ) - 16 noviembre el año 2015 Candidato v3.4.0 Release ( depuración ) - Octubre 12ª, el año 2015 v3.3.0 ( depuración ) - Febrero 18va, el año 2015 v3.2.0 ( depuración ) - Agosto 12ª, 2014 Beta v3.2.0 ( depuración ) - Junio 19na, 2014 v3.1.0 ( depuración ) - 4 ° de marzo de, 2014 Beta v3.1.0 ( depuración ) - Febrero 12ª, 2014 v3.0.0 ( depuración ) ( Notas de actualización ) - 25to de octubre de, 2013 Candidato v3.0.0 Release ( depuración ) - 30o de septiembre de, 2013 Beta v3.0.0 ( depuración ) - 9 ° de julio de, 2013 v2.3.0 ( depuración ) - 9 ° de julio de, 2013 Candidato v2.3.0 Release ( depuración ) - Junio 20o, 2013 v2.2.1 ( depuración ) - decimoquinta de enero de, 2013 v2.2.0 ( depuración ) - 28a de octubre de, 2012 Candidato v2.2.0 Release ( depuración ) - 1º de octubre de, 2012 v2.1.0 ( depuración ) - el 7 de mayo de, 2012 Candidato v2.1.0 Release 2 ( depuración ) - Abril 25o, 2012 Candidato v2.1.0 Release ( depuración ) - Abril décima octava, 2012 Beta v2.1.0 ( depuración ) - 23ro de marzo de, 2012 v2.0.0 ( depuración ) - 21 de de diciembre de, 2011 Candidato v2.0.0 Release ( depuración ) - 14o de diciembre de, 2011 Beta v1.3.0 ( depuración ) - 30mo de agosto de, 2011 v1.2.1 ( depuración ) - Mayo 22o, 2011 v1.2.0 ( depuración ) - Abril 27a, 2011 v1.1.2 ( depuración ) - 1 de Enero, 2011 v1.1.1 ( depuración ) - 5 ° de noviembre de, 2010 v1.1.0 ( depuración ) - Octubre decima novena, 2010 v1.0.5 ( depuración ) - 24ST de agosto de 2010 v1.0.4 ( depuración ) - Agosto 12ª, 2010 v1.0.3 ( depuración ) - trigésima de julio de, 2010 v1.0.2 ( depuración ) - Julio 22a, 2010 v1.0.1 ( depuración ) - 9 ° de julio de, 2010 v1.0.0 ( depuración ) - 5 ° de julio de, 2010

Archivos relacionados 

jquery.tmpl ( depuración ) - el viejo plugin de jQuery a veces se utiliza con versiones anteriores de Knockout.js. Este enfoque de la plantilla es obsoleta desde Knockout v2.0.0.

Un elemento importante en este modelo es el binding, que permite unir uni o bidireccionalmente ciertos atributos y/o métodos del viewmodel a elementos del DOM, de esta manera, y utilizando el patrón observador, podemos tener sincronizado la vista con el viewModel con un mínimo esfuerzo.

¿ D O N D E EN T R A KN OC K O U T . JS E N T O D O ES T O?

   

Knockout.js es una biblioteca javascript, que nos ayuda a implementar este modelo MVVM. Dentro de las características especiales, tal cual indica en su página, nos permite: Realizar Binding Declarativos Resfresco automático de los elementos del UI, como decía, cuando se actualiza el modelovista, nuestra UI se actualiza automáticamente Tracking de Dependencias, detecta los cambios realizados en la vista o en el modelo y es capaz de propagarlos . Plantillas, permite generar rapidamente plantillas en función de los datos del modelovista. Además, tal como indica la página es totalmente libre, open source, totalmente construido sobre javascript, funciona con cualquier framework adicional, es bastante liviano, solo 40k minimizado, no tiene dependencias , soporte para IE6+, Firefox 2+.Chrome, Opera y Safari (versión móvil y de escritorio) y totalmente documentada. Veamos nuestro primer ejemplo, siguiendo la documentación en: http://knockoutjs.com/documentation/observables.html#mvvm_and_ view_models Para el ejemplo voy a utilizar WebMatrix, para mi uno de los mejores editores de código grátis disponible, entonces voy a descargar la biblioteca y manos a la obra

C Ó D I G O DE L E J E M P LO <meta charset="utf-8" /> 573u61 <script type="text/javascript" src="js/knockout-2.1.0.js">

Ejemplo MVVM 2t2z5i

El nombre es <span data-bind="text:nombre">
El apellido es <span data-bind="text:apellidos">
El edad es <span data-bind="text:edad">

Ejemplo MVVM 2t2z5i

El nombre es <span data-bind="text:nombre">
El apellido es <span data-bind="text:apellidos">
El edad es <span data-bind="text:edad">

Knockout En Español 513sx

Overview 26281t

More details 6y5l6z

Ejemplo MVVM 2t2z5i

Ejemplo MVVM 2t2z5i

Related Documents 3h463d

Knockout Js En Espanol 2y53i

Knockout Drum 5w1uf

2d Knockout 6l2q1r

Rcd Espaol 3b3c6v

E2-knockout-drum.pdf 691261

Comics De Garfield En Espaol Pdf 6w1h5u

More Documents from "Luis Arrieta" 735i46

Knockout Js En Espanol 2y53i

4p345f

4p345f

Guia-tecnica Malanga 6r5v12

Ensayo Estrategias Competitivas 74x68

Cups Odontologia o6l5v