¿Qué es MVVM, y deberíamos usarlo?

Question

He estado mirando el patrón MVVM, específicamente knockoutjs, y sobre todo me hace encogerme. No voy a entrar en una larga diatriba sobre los beneficios de mantener la estructura, presentación y mostrar por separado, sólo voy a 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 poner tanto control de comportamiento en el marcado? Tan limpio y tan minimalista como esto es, parece ir en contra de todos los principios de programación web que he escuchado.

¿Estoy equivocado?

Answer 1

Su único uso de una parte de MVVM, específicamente la Vista, en ese ejemplo de código que proporcionó anteriormente. La razón para utilizar 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 muchos códigos repetitivos solo para devolver valores de su vista.

veo un montón de javascript poco firme código/jQuery donde la gente va y usar algo como esto:

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

El problema con esto es que está literalmente llena en toda la aplicación web y se convierte en extremadamente tedioso mantener. Sé que con Knockout, siempre que se actualice mi View, mi View Model también se actualizará.

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

Answer 2

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

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

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

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

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

Ayuda a pensar en el marcado HTML como una coincidencia. Lo que realmente está mirando es el acceso estructurado al modelo de vista. Piense en with y 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 parece más como trabajar con XSLT.

Los dos ejemplos parecen muy similares. Pero los conceptos subyacentes son muy diferentes y hacen que los datos sean tan potentes y los atributos en el evento sean tan desagradables.

La razón por la que los atributos de evento están mal visto no es solo que combinan la lógica con la 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 amplían el comportamiento de los elementos.

Dicho todo esto, es posible 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 debes juzgar las tecnologías por cómo se puede abusar de ellas: todos somos adultos aquí.