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
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

<script type="text/javascript"> var PersonaViewModel = { nombre: "Juan Pablo apellidos: "Pérez Nuñez", edad: 1 }; ko.applyBindings(PersonaViewModel);

Revisemos un poco el código antes de continuar, puedes ver que construimos un objeto javascript que tiene 3 atributos, estos atributos se van a bindear a los elementos span que tienen el tag data-bind , el cual, si bien no es nativo de html5, es compatible con él. Luego, y para realizar el binding, debemos invocar el metodo applyBindings de la biblioteca, pasandole como argumento nuestro ViewModel. Algo muy bueno es que al momento de escribir nuestro código javascript con WebMatrix podemos ver que nos sugiere que propiedades enlazar:

Y listo!, el resultado es:

Como puedes ver se ha hecho el render en tags span con el atributo databind, ahora veamos un ejemplo con binding bidireccional, para eso

vamos a incluir un input text, de manera que al escribir y/o cambiar la edad sobre este elemento, se modifique de manera inmediata el ViewModel. Para esto tenemos que hacer la propiedad del ViewModel observable, esto lo logramos modificando la propiedad edad y agregando en input type con el data-bind: <meta charset="utf-8" /> 573u61 <script type="text/javascript" src="js/knockout-2.1.0.js">

Ejemplo MVVM 2t2z5i

<script type="text/javascript"> var PersonaViewModel = { nombre: "Juan Pablo", apellidos: "Pérez Nuñez", edad: ko.observable(1) }; ko.applyBindings(PersonaViewModel);

Y todo funcionando tal cual queremos, cada vez que aumentas o disminuyes la edad, automáticamente se está actualizando al información del viewModel.

Bueno, ese ha sido nuestra pequeña introducción, voy a ir agregando nuevos tutoriales, que forman parte de mi proceso de aprendizaje Nos vemos en otro artículo!, Saludos, @chalalo

Related Documents 3h463d

Knockout Js En Espanol 2y53i
May 2022 0
Knockout Drum 5w1uf
June 2020 6
2d Knockout 6l2q1r
January 2023 0
Rcd Espaol 3b3c6v
April 2020 52
E2-knockout-drum.pdf 691261
December 2021 0
Comics De Garfield En Espaol Pdf 6w1h5u
May 2021 0

More Documents from "Luis Arrieta" 735i46

Knockout Js En Espanol 2y53i
May 2022 0
4p345f
April 2022 0
4p345f
November 2020 0
Guia-tecnica Malanga 6r5v12
November 2019 82
Ensayo Estrategias Competitivas 74x68
October 2020 0
Cups Odontologia o6l5v
November 2019 91