Tengo un modelo de datos que estoy hidratando a través de un proceso que controlo, por lo que puedo actualizar su esquema y propiedades si es necesario:
results:
{ pizza: [ { source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' }, { source: '4', symbol: 'pizza', id: '4.pizza', cost: '0.00' } ], apple: [ { source: '3', symbol: 'apple', id: '3.apple', cost: '0.00' }, { source: '4', symbol: 'apple', id: '4.apple', cost: '0.00' }, { source: '4', symbol: 'apple', id: '4b.apple', cost: '0.00' } ] } Para la vista, usando React , querré mostrar estos datos en una tabla que actualizará el totalAmount de cada resultado, actualizando la celda de la tabla para esa fila. Sin embargo, lo más importante por ahora es cómo actualizar el modelo.
Ahora que tenemos el modelo de datos inicial, necesito agregar detectores de eventos (después de que tengamos el modelo) a cada objeto de source , cada uno con su propio punto final único para ejecutar una función. Puedo suscribirme a un evento source que se activa cada vez que esa fuente tiene un cambio. Cuando hay un cambio, quiero actualizar el cost de esa fuente , agregar todos los costos para ese result y totalAmount el monto total de ese resultado pero no actualizar ningún otro monto total (pero podemos, pero no tan elegante).
La primera pregunta es cómo agregar un detector de objetos solo a cada objeto source y no actualizar todas las fuentes en el modelo. Para esto, probé lo siguiente desde here , que funciona en la prueba de MyVar.prop1 , pero no estoy seguro de cómo agregaría algo como esto a los subobjetos de result individuales. ¿Hay que aplicarlo a todo el modelo?
var MyVar = { _prop1: 0, get prop1() { return this._prop1; }, set prop1(value) { this._prop1 = value; /*Listener code can go here*/ } }; En segundo lugar, una vez que se detecta un cambio, la devolución de llamada debe hacer algo como results["pizza"].totalAmount = {sum of all costs for this object} . Esto agregaría una propiedad totalAmount . Sin embargo, ¿sería mejor crear una propiedad vacía para completarla más tarde?
{ source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' }, <== cambio detectado, costo cambiado a 5.00.
El modelo resultante para este objeto sería entonces:
{ pizza: [ { source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' }, { source: '4', symbol: 'pizza', id: '4.pizza', cost: '0.00' }, totalAmount: '5.00' ], ...Y la tabla actualizada con los nuevos valores.