tutorial knockoutjs knockout example javascript mvvm design-patterns knockout.js

javascript - knockoutjs - ¿Qué es MVVM, y debemos usarlo?



knockoutjs com foreach (2)

He estado mirando el patrón de MVVM, específicamente los knockoutjs, y sobre todo me hace temblar. No haré una perorata larga sobre los beneficios de mantener la estructura, la presentación y la visualización por separado, solo preguntaré (como ejemplo): ¿Cuál es la diferencia entre

<button data-bind="click: someJavaScriptFunction">Something</button>

y

<button onclick="someJavaScriptFunction();">Something</button>

¿Y deberíamos estar poniendo tanto control de comportamiento en el marcado? Tan limpio y minimalista como es, parece ir en contra de todos los principios de programación web que he escuchado.

¿Me equivoco?


Aquí hay una respuesta más directa a su pregunta.

En el segundo ejemplo, se refiere a una función que tiene que estar en el ámbito global (es decir, una propiedad del objeto de window ).

En el primer ejemplo, se refiere a una propiedad del modelo de vista actual.

Sí, es una distinción sutil, pero es una importante. Si usa los atributos en el evento, solo puede referirse a cosas que existen en el ámbito global. Esto significa que tiene que poner todo lo que desea acceder en el ámbito global, lo que lleva a un código muy desordenado.

Si utiliza enlaces declarativos, el significado exacto de los enlaces depende del contexto.

Ayuda pensar en el marcado HTML como una coincidencia más. Lo que realmente está mirando es el acceso estructurado al modelo de vista. Piense with y para forEach como contextos anidados y de los otros enlaces como sus atributos. La relación entre los enlaces declarativos y el HTML subyacente de repente se siente más como trabajar con XSLT.

Los dos ejemplos parecen muy similares. Pero los conceptos subyacentes son muy diferentes y son lo que hace que los enlaces de datos sean tan poderosos y los atributos del evento sean tan desagradables.

La razón por la que los atributos en el evento son mal vistos no es solo que mezclen lógica con estructura. Es que son un intento débil de atornillar código JavaScript arbitrario a elementos HTML que impide la encapsulación adecuada de la lógica de la aplicación. Los atributos en el evento son "ganchos" de bajo nivel, los enlaces extienden el comportamiento de los elementos.

Dicho todo esto, es probable que se puedan hacer las mismas cosas horribles que las personas han hecho con los atributos en el evento mediante el uso de enlaces declarativos. La diferencia está en qué más puedes hacer con ellos. No siempre se debe juzgar a las tecnologías por la forma en que pueden ser objeto de abuso, todos somos adultos aquí.


Solo está utilizando una parte de MVVM, específicamente la Vista, en el código que dio anteriormente. La razón para usar Knockout (o cualquier otra biblioteca de MVVM) es facilitar el enlace de sus vistas a un Modelo, un Modelo de Vista, lo que le permite dejar de escribir una gran cantidad de código repetitivo para devolver los valores de su vista.

Veo un montón de código javascript / jquery no deseado donde la gente va y usa algo como esto:

var ex = { some1: $(''#textbox1'').val(), some2: $(''#textbox2'').val() };

El problema con esto es que está literalmente lleno de basura en toda la aplicación web y se vuelve extremadamente tedioso de mantener. Sé que con Knockout, siempre que mi Vista se actualice, mi Modelo de Vista también se actualizará.

No es necesario para todas las aplicaciones, y no debe usarlo solo porque su uso es "genial". Obviamente, debe haber una razón para usarlo, mi ejemplo anterior es una de las razones y estoy seguro de que hay más.