Purpose: Handles dynamic assignment operations by modifying DOM elements based on parameter configurations, useful for updating UI elements dynamically.

Features

• Dynamic element attribute modification
• Element reference resolution (from other elements)
• Support for innerHTML, value, textContent, and custom attributes
• Nested parameter handling
• Event prevention options

Actions

• assign: Execute assignment operations

Usage Examples

Basic Attribute Assignment

<div id="status-display">Pending</div>
<div id="color-indicator" class="bg-gray-200"></div>

<%= select_tag :status,
    options_for_select([
      ['Pending', 'pending'],
      ['Approved', 'approved'],
      ['Rejected', 'rejected']
    ]),
    data: {
      controller: "fx-assigner",
      action: "change->fx-assigner#assign",
      "fx-assigner-change-param": {
        "#status-display": {
          textContent: "Processing..."
        },
        "#color-indicator": {
          class: "bg-yellow-200"
        }
      }.to_json
    } %>

Element Reference Assignment

<div id="source-text">Hello World</div>
<input id="target-input" type="text">
<div id="display-area">Empty</div>

<%= button_tag "Copy Content",
    data: {
      controller: "fx-assigner",
      action: "click->fx-assigner#assign",
      "fx-assigner-change-param": {
        "#target-input": {
          value: {
            element: "#source-text",
            attribute: "textContent"
          }
        },
        "#display-area": {
          innerHTML: {
            element: "#source-text",
            attribute: "innerHTML"
          }
        }
      }.to_json
    } %>

Complex Form Integration

<%= form_with model: @product do |f| %>
  <%= f.select :category_id, options_from_collection_for_select(@categories, :id, :name),
      data: {
        controller: "fx-assigner",
        action: "change->fx-assigner#assign",
        "fx-assigner-prevent-default-param": "true",
        "fx-assigner-change-param": {
          "#category-description": {
            textContent: {
              element: "option:checked",
              attribute: "data-description"
            }
          },
          "#category-settings": {
            class: "block"
          }
        }.to_json
      } %>

  <div id="category-description" class="text-sm text-gray-600 mt-2"></div>
  <div id="category-settings" class="hidden mt-4">
    <!-- Category-specific settings -->
  </div>
<% end %>