¿Qué es el patrón de arquitectura MVVM?

El patrón MVVM (Model-View-ViewModel) divide la aplicación en tres partes principales:

• Model: Representa los datos y la lógica de negocio. No depende de la interfaz de usuario.
• View: Es la capa de interfaz de usuario. Muestra los datos del ViewModel y envía las acciones del usuario al ViewModel. La View no contiene lógica de procesamiento de datos.
• ViewModel: Es el vínculo entre la View y el Model. Proporciona los datos del Model en un formato conveniente para la View y procesa las acciones del usuario, actualizando el Model. El ViewModel contiene la lógica de presentación y manejo de entrada del usuario.

Las conexiones entre componentes generalmente se implementan mediante enlaces de datos. La View observa los cambios en el ViewModel y se actualiza automáticamente, y el ViewModel puede reaccionar a eventos de la View.

// Ejemplo de ViewModel (JavaScript condicional)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Proporciona datos para la View
    this.newTodoText = ''; // Estado para el campo de entrada en la View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Limpia el campo después de agregar
    }
  }

  removeTodo(index) {
    this.model.removeTodo(index);
  }
}