Bind nested data using Structs and Arrays

[grantcopley]

Objective:

The goal is to enhance CBWIRE's data-binding capabilities to support nested data structures effectively. This feature will allow users to bind properties from nested arrays and structs directly in their CBWIRE components.

Details:

Currently, CBWIRE allows for straightforward data binding, but there is a need for more complex bindings involving nested data structures. The proposed feature aims to handle scenarios where data is structured in nested arrays and structs, as illustrated in the provided code snippet.

Example Use Case

data = {
    "someStruct": {
        "someKey": "someValue"
    },
    "fruits": [
        {
            "name": "apple",
            "color": "red"
        },
        {
            "name": "banana",
            "color": "yellow"
        },
        {
            "name": "orange",
            "color": "orange"
        }
    ]
}
</cfscript>

<cfoutput>
    <div>
        <h1>Binding Nested Data</h1>
        <div>
            <input type="text" wire:model="someStruct.someKey">
            <input type="text" wire:model="fruits.0.name">
            <input type="text" wire:model="fruits.1.name">
            <input type="text" wire:model="fruits.2.name">
        </div>
    </div>
</cfoutput>

In this scenario, the user seeks to bind values from a struct (someStruct.someKey) and from elements within an array of structs (fruits.0.name, fruits.1.name, fruits.2.name).

Expected Functionality:

CBWIRE should allow binding to nested structs and array elements within the component's data model. Changes to the input fields should reflect immediately in the corresponding data structure. The feature should support both reading and writing values to these nested structures. Implementation Considerations:

Ensure compatibility with existing data-binding features of CBWIRE. Consider performance implications, especially with deeply nested structures or large arrays. Include comprehensive testing to cover various nesting scenarios.

[grantcopley]

Here's a nested array example

<cfscript>
    data = {
        "someStruct": {
            "someKey": "someValue"
        },
        "fruits": [
            {
                "name": "apple",
                "color": "red",
                "categories": [ "red" ]
            },
            {
                "name": "banana",
                "color": "yellow",
                "categories": [ "red" ]
            },
            {
                "name": "orange",
                "color": "orange",
                "categories": [ "red" ]
            }
        ]
    }
</cfscript>

<cfoutput>
    <div>
        <h1>Binding Nested Data</h1>
        #serializeJson( data )#
        <div>
            <input type="text" wire:model="someStruct.someKey"><br>
            <input type="text" wire:model="fruits.0.name"><br>
            <input type="text" wire:model="fruits.1.name"><br>
            <input type="text" wire:model="fruits.2.name"><br>
            <input type="text" wire:model="fruits.2.categories.0"><br>
        </div>
    </div>
</cfoutput>