Out-of-Band Swaps

Trongate MX introduces a powerful feature for updating multiple parts of your webpage with a single request: the mx-select-oob attribute. This "out-of-band" swapping mechanism allows you to update elements beyond the primary target of your request, providing a more dynamic and efficient way to refresh your page content.

Understanding mx-select-oob

The mx-select-oob attribute enables you to select specific content from a server response and swap it into designated parts of your current DOM. This provides precise control over both the source of the content in the response and where it should be inserted in your page.

Syntax

The mx-select-oob attribute supports two types of syntax:

Comma-Separated String Syntax

Each pair consists of two parts separated by a colon (:):

mx-select-oob="[source selector]:[target selector], [source selector]:[target selector], ..."

Source selector: Identifies the content in the server response
Target selector: Specifies where in the current DOM to insert the content

JSON-Like Array Syntax

Each swap is represented as an object within an array:

mx-select-oob='[
    {"select": "[source selector]", "target": "[target selector]", "swap": "[swap method]"},
    {"select": "[source selector]", "target": "[target selector]", "swap": "[swap method]"}
]'

select: Identifies the content in the server response
target: Specifies where in the current DOM to insert the content
swap: Specifies the swap method (optional, defaults to 'innerHTML')

Basic Example

Here's a simple example demonstrating the use of mx-select-oob with comma-separated string syntax:

<div>
  <div id="alert"></div>
  <div id="sidebar"></div>
  <button mx-get="info" 
          mx-select="#info-details" 
          mx-swap="outerHTML" 
          mx-select-oob="h1:h3, h2:h1">
    Get Info!
  </button>
</div>

When this button is clicked, Trongate MX will:

Make a GET request to info
Replace the button with the #info-details element from the response
Insert the h1 content from the response into the h3 element
Insert the h2 content from the response into the h1 element

Advanced Example

Here's an example demonstrating the use of mx-select-oob with JSON-like array syntax:

<button mx-get="info" 
        mx-select="#info-details" 
        mx-swap="outerHTML" 
        mx-select-oob='[
            {"select": "h1", "target": "h3", "swap": "outerHTML"},
            {"select": "h2", "target": "h1", "swap": "innerHTML"}
        ]'>
  Get Info!
</button>

In this advanced example:

The h1 content from the response will replace the h3 element using the outerHTML swap method
The h2 content from the response will replace the inner HTML of the h1 element

Note: When using mx-select-oob, it's crucial to maintain consistency between your client-side selectors and server-side response structure. This ensures smooth and predictable updates across your application.

Key Features

Flexible Syntax: Supports both comma-separated strings and JSON-like arrays for specifying out-of-band swaps.
Precise Control: Allows for explicit specification of both source and target selectors, offering precise control over out-of-band swaps.
Multiple Swaps: Enables multiple elements to be swapped in a single request, improving efficiency.
Default Behavior: If no swap strategy is specified for an out-of-band swap, it defaults to 'innerHTML'.

Use Meaningful IDs: Employ descriptive IDs for your source and target elements to keep your code readable and maintainable.
Consider Performance: While updating multiple elements in a single request can be efficient, be mindful of the increased complexity in your server response.
Judicious Use: Out-of-band swaps are powerful for updating related content, but overuse can lead to complex and hard-to-maintain code.
Server Response Structure: Ensure your server responses are structured to match your mx-select-oob selectors to avoid unexpected behavior.
Combine with Other Attributes: Use mx-select-oob in conjunction with other Trongate MX attributes for more sophisticated interactions.

Summary

Out-of-band content selection and swapping with mx-select-oob is a powerful feature in Trongate MX that enables developers to create more dynamic and responsive web applications. By allowing multiple parts of a page to be updated efficiently with a single server request, it opens up new possibilities for interactive and real-time user experiences. Master this feature to take full advantage of Trongate MX's capabilities in building modern, efficient web applications.