knockout.js - multiple - La mejor práctica con múltiples ViewModels

knockoutjs variables

Question

Tengo una página de edición con 3 partes lógicas para la página:

• Encabezamiento
• Orden
• Pago

El usuario puede editar cada sección a la vez y enviar los cambios con un solo botón de envío.

Esta página es bastante grande en términos de funcionalidad y el objeto que el usuario está editando.

El objeto que se envía a la página para editar es un objeto JSON con algunas propiedades que no se editan pero que necesitan volver a enviar.

Es la mejor práctica en este escenario tener la siguiente estructura de máquina virtual:

• Master VM
  • Header VM
  • Orden VM
  • Pago VM

Asignaría cada VM a la sección apropiada de la página. ¿Cuál es la forma más fácil de fusionar los cambios con el objeto maestro JSON para poder enviar solo ese objeto al servidor?

Answer 1

La división de la página parece lógica, y no debería ser un problema en sí mismo. Pero existen diferentes enfoques sobre cómo lo hará, lo que trae sus propios desafíos.

La salida ''fácil'' sería, como usted propuso, tener una visión maestra similar a un árbol, con modelos de vista secundarios. Recuerdo esto como un enfoque recomendado cuando comencé con Knockout hace un año o 2. En vanilla JS obtendrías algo como:

function childVM() { this.prop = ko.observable(0); }
function masterVM() { 
  this.children = ko.observableArray([new childVM(), new childVM()]); 
}

Pero también podrías usar (o incluso más bien) ko.components , que después de todo sirven específicamente para descomponer código grande en módulos (y funcionan muy bien con RequireJS). (Por cierto, puedes insertar componentes el uno en el otro, aunque los hace dependientes). Un ejemplo de un componente que usa el código anterior:

ko.components.register(''child'', {
  viewModel: function childVM(params) { this.prop = ko.observable(0||params.number)},
  template: { element: ''child'' }); //looks for tmpl with id ''child''
function masterVM() { 
  this.children = ko.observableArray([new childVM(), new childVM()]); 
}

Con este enfoque, también puede usar elementos personalizados, por ejemplo: <child params=''{number: 4}></child> . Esencialmente, los componentes funcionan igual que el enfoque de vanguardia, excepto que están vinculados a un elemento primario a través de la vista, no de forma explícita en viewModel. Como paso siguiente, que permite que los modelos o componentes secundarios se comuniquen entre sí, usaría un sistema pub-sub . Consulte aquí para obtener más información: http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html

Obtener los datos de sus diferentes modelos de vista después de submit sería tan simple como usar una llamada ko.mapping.toJS en cada modelo hijo (usando el plugin de mapeo , convierte todos los observables a JS regular), combínelos, stringify a JSON, y enviarlo