Handle dirty for dbModels.

Author: adamghill

django_unicorn/static/js/eventListeners.js

@@ -259,7 +259,6 @@ export function addActionEventListener(component, eventType) {
 export function addModelEventListener(component, element, eventType) {
   eventType = eventType || element.model.eventType;
   element.events.push(eventType);
-
   const { el } = element;
 
   el.addEventListener(eventType, (event) => {
@@ -349,6 +348,18 @@ export function addDbEventListener(component, element, eventType) {
       return;
     }
 
+    for (let i = 0; i < component.data[element.model.name].length; i++) {
+      const dbModel = component.data[element.model.name][i];
+
+      if (dbModel.pk.toString() === element.db.pk) {
+        if (dbModel[element.field.name] !== element.getValue()) {
+          element.handleDirty();
+        } else {
+          element.handleDirty(true);
+        }
+      }
+    }
+
     if (!component.lastTriggeringElements.some((e) => e.isSame(element))) {
       component.lastTriggeringElements.push(element);
     }

example/unicorn/templates/unicorn/models.html

@@ -1,4 +1,10 @@
 <div>
+    <style>
+        .dirty {
+            border: red 1px solid !important;
+        }
+    </style>
+    
     <div>
         <h3>New Flavor (instance variable)</h3>
 
@@ -62,14 +68,14 @@ <h3>Last 2 added flavors</h3>
             <h4>PK: {{ flavor.pk }}</h4>
             <div>
                 <label>Name</label>
-                <input type="text" unicorn:field.defer="name"></input>
+                <input type="text" unicorn:field.defer="name" u:dirty.class="dirty"></input>
 
                 <strong>Name</strong> {{ flavor.name }}
             </div>
 
             <div>
                 <label>Label</label>
-                <input type="text" unicorn:field.defer="label"></input>
+                <input type="text" unicorn:field.defer="label" u:dirty.class="dirty"></input>
 
                 <strong>Label</strong> {{ flavor.label }}
             </div>