Trigger a component update by triggering an event for a model element.

Author: adamghill

django_unicorn/static/unicorn/js/component.js

@@ -518,9 +518,28 @@ export class Component {
     }
   }
 
+  /**
+   * Triggers the event's callback if it is defined.
+   * @param {String} eventName The event name to trigger. Current options: "updated".
+   */
   triggerLifecycleEvent(eventName) {
     if (eventName in lifecycleEvents) {
       lifecycleEvents[eventName].forEach((cb) => cb(this));
     }
   }
+
+  /**
+   * Manually trigger a model's `input` or `blur` event to force a component update.
+   *
+   * Useful when setting an element's value manually which won't trigger the correct event to fire.
+   * @param {String} key Key of the element.
+   */
+  trigger(key) {
+    this.modelEls.forEach((element) => {
+      if (element.key === key) {
+        const eventType = element.model.isLazy ? "blur" : "input";
+        element.el.dispatchEvent(new Event(eventType));
+      }
+    });
+  }
 }

django_unicorn/static/unicorn/js/unicorn.js

@@ -121,3 +121,11 @@ export function addEventListener(eventName, callback) {
 
   lifecycleEvents[eventName].push(callback);
 }
+
+/**
+ * Trigger a component update by dispatching an event for a particular element.
+ */
+export function trigger(componentNameOrKey, elementKey) {
+  const component = getComponent(componentNameOrKey);
+  component.trigger(elementKey);
+}

tests/js/component/models.test.js

@@ -1,6 +1,13 @@
 import test from "ava";
 import { getComponent } from "../utils.js";
 
+class Event {
+  constructor(type) {
+    this.type = type;
+  }
+}
+global.Event = Event;
+
 test("modelEls", (t) => {
   const component = getComponent();
 
@@ -17,7 +24,7 @@ test("abbreviated name", (t) => {
   t.is(component.modelEls.length, 1);
 });
 
-test("model.lazy has input and blur events ", (t) => {
+test("model.lazy has input and blur events", (t) => {
   const html = `
   <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
     <input u:model.lazy='name'></input>
@@ -30,3 +37,54 @@ test("model.lazy has input and blur events ", (t) => {
 
   t.is(element.events.length, 2);
 });
+
+test("model trigger with invalid key", (t) => {
+  t.plan(0);
+
+  const html = `
+  <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input u:model.lazy='name' u:key='nameKey'></input>
+  </div>`;
+  const component = getComponent(html);
+  const element = component.modelEls[0];
+
+  element.el.dispatchEvent = () => {
+    t.pass();
+  };
+
+  component.trigger("invalidNameKey");
+});
+
+test("model.lazy trigger", (t) => {
+  t.plan(1);
+
+  const html = `
+  <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input u:model.lazy='name' u:key='nameKey'></input>
+  </div>`;
+  const component = getComponent(html);
+  const element = component.modelEls[0];
+
+  element.el.dispatchEvent = (event) => {
+    t.true(event.type === "blur");
+  };
+
+  component.trigger("nameKey");
+});
+
+test("model trigger", (t) => {
+  t.plan(1);
+
+  const html = `
+  <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input u:model='name' u:key='nameKey'></input>
+  </div>`;
+  const component = getComponent(html);
+  const element = component.modelEls[0];
+
+  element.el.dispatchEvent = (event) => {
+    t.true(event.type === "input");
+  };
+
+  component.trigger("nameKey");
+});