Support targeting multiple partials.

Author: adamghill

django_unicorn/static/js/component.js

@@ -249,11 +249,11 @@ export class Component {
   /**
    * Calls the method for a particular component.
    */
-  callMethod(methodName, partial, errCallback) {
+  callMethod(methodName, partials, errCallback) {
     const action = {
       type: "callMethod",
       payload: { name: methodName },
-      partial,
+      partials,
     };
     this.actionQueue.push(action);
 
@@ -334,13 +334,13 @@ export class Component {
         false
       );
 
-      this.poll.partial = rootElement.partial;
+      this.poll.partials = rootElement.partials;
 
       if (this.isPollEnabled()) {
         // Call the method once before the timer starts
         this.callMethod(
           this.poll.method,
-          this.poll.partial,
+          this.poll.partials,
           this.handlePollError
         );
       }
@@ -357,7 +357,7 @@ export class Component {
       if (this.isPollEnabled()) {
         this.callMethod(
           this.poll.method,
-          this.poll.partial,
+          this.poll.partials,
           this.handlePollError
         );
       }

django_unicorn/static/js/element.js

@@ -31,8 +31,8 @@ export class Element {
     this.actions = [];
     this.db = {};
     this.field = {};
+    this.partials = [];
     this.target = null;
-    this.partial = {};
     this.key = null;
     this.events = [];
     this.errors = [];
@@ -100,11 +100,11 @@ export class Element {
         this.target = attribute.value;
       } else if (attribute.isPartial) {
         if (attribute.modifiers.id) {
-          this.partial.id = attribute.value;
+          this.partials.push({ id: attribute.value });
         } else if (attribute.modifiers.key) {
-          this.partial.key = attribute.value;
+          this.partials.push({ key: attribute.value });
         } else {
-          this.partial.target = attribute.value;
+          this.partials.push({ target: attribute.value });
         }
       } else if (attribute.eventType) {
         const action = {};

django_unicorn/static/js/eventListeners.js

@@ -239,11 +239,11 @@ export function addActionEventListener(component, eventType) {
           if (action.key) {
             if (action.key === toKebabCase(event.key)) {
               handleLoading(component, targetElement);
-              component.callMethod(action.name, targetElement.partial);
+              component.callMethod(action.name, targetElement.partials);
             }
           } else {
             handleLoading(component, targetElement);
-            component.callMethod(action.name, targetElement.partial);
+            component.callMethod(action.name, targetElement.partials);
           }
         }
       });
@@ -291,7 +291,7 @@ export function addModelEventListener(component, element, eventType) {
         name: element.model.name,
         value: element.getValue(),
       },
-      partial: element.partial,
+      partials: element.partials,
     };
 
     if (!component.lastTriggeringElements.some((e) => e.isSame(element))) {
@@ -408,7 +408,7 @@ export function addDbEventListener(component, element, eventType) {
         db: element.db,
         fields: {},
       },
-      partial: element.partial,
+      partials: element.partials,
     };
 
     action.payload.fields[element.field.name] = element.getValue();

django_unicorn/views/__init__.py

@@ -101,6 +101,8 @@ def _process_component_request(
     for action in component_request.action_queue:
         if action.partial:
             partials.append(action.partial)
+        else:
+            partials = action.partials
 
         if action.action_type == "syncInput":
             sync_input.handle(component_request, component, action.payload)

django_unicorn/views/objects.py

@@ -19,10 +19,11 @@ class Action:
     def __init__(self, data):
         self.action_type = data.get("type")
         self.payload = data.get("payload", {})
-        self.partial = data.get("partial")
+        self.partial = data.get("partial")  # this is deprecated, but leaving it for now
+        self.partials = data.get("partials", [])
 
     def __repr__(self):
-        return f"Action(action_type='{self.action_type}' payload={self.payload} partial={self.partial})"
+        return f"Action(action_type='{self.action_type}' payload={self.payload} partials={self.partials})"
 
 
 class ComponentRequest:

example/unicorn/templates/unicorn/html-inputs.html

@@ -12,6 +12,7 @@ <h2>Boolean Toggles</h2>
         <button unicorn:click="$toggle('is_checked', 'another_check')">Toggle booleans (normal)</button><br />
         <button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.key="boolean-toggles-key">Toggle booleans (partial.key)</button>
         <button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id">Toggle booleans (partial.id)</button><br />
+        <button unicorn:click="$toggle('is_checked', 'another_check')" u:partial.id="boolean-toggles-id" u:partial.key="boolean-toggles-key">Toggle booleans (multiple partials)</button><br />
         <button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-id">Toggle booleans (partial boolean-toggles-id)</button>
         <button unicorn:click="$toggle('is_checked', 'another_check')" u:partial="boolean-toggles-key">Toggle booleans (partial boolean-toggles-key)</button>
     </div>

tests/js/element/partial.test.js

@@ -3,24 +3,33 @@ import { getElement } from "../utils.js";
 
 test("partial target", (t) => {
   const html =
-    "<button unicorn:click='test_click' unicorn:partial='test-id'>Click</button>";
+    "<button unicorn:click='test_click' unicorn:partial='test-target'>Click</button>";
   const element = getElement(html);
 
-  t.is(element.partial.target, "test-id");
+  t.is(element.partials[0].target, "test-target");
 });
 
 test("partial.id", (t) => {
   const html =
     "<button unicorn:click='test_click' unicorn:partial.id='test-id'>Click</button>";
   const element = getElement(html);
 
-  t.is(element.partial.id, "test-id");
+  t.is(element.partials[0].id, "test-id");
 });
 
 test("partial.key", (t) => {
   const html =
-    "<button unicorn:click='test_click' unicorn:partial.key='test-id'>Click</button>";
+    "<button unicorn:click='test_click' unicorn:partial.key='test-key'>Click</button>";
   const element = getElement(html);
 
-  t.is(element.partial.key, "test-id");
+  t.is(element.partials[0].key, "test-key");
+});
+
+test("multiple partials", (t) => {
+  const html =
+    "<button unicorn:click='test_click' unicorn:partial.id='test-id' unicorn:partial.key='test-key'>Click</button>";
+  const element = getElement(html);
+
+  t.is(element.partials[0].id, "test-id");
+  t.is(element.partials[1].key, "test-key");
 });