Pass data from javascript to backend

[wrabit]

Coming from using a different reactive, backend-driven framework, I am used to being able to send arbitrary data using a simple javascript api. The library in question is Livewire, built for the PHP framework, Laravel. They include a js lib which creates some directives to help you along the way and can do things like:

<script>
    const datepicker = document.getElementById('datepicker');

    DatePickerLibrary('#datepicker', {
        onUpdate: (value) => $wire.set('date', value)
    })
    
    // Their js util library provides "$wire" function to perform, in this case, an ajax call to update the backend

    // You could as well do this:
    $wire.set('name', name) // set's the server-side property
</script>

Trying to create some interactive form fields and components with idom I feel something like this will be really useful.

Is there anything that exists already that may achieve something similar - setting backend properties via some javascript call?

[Archmonger]

Last I recall, I was told the API exists but is not documented.

See related issue

• Improve JavaScript components docs #647

[Archmonger]

Yep, docs need to be updated to show both directions.

[wrabit]

Ok, any pointers where to look for this myself?

[Archmonger]

I havent dug into the JavaScript API, so I'd need to defer that question to Ryan.

[rmorshea]

IDOM allows to write custom components for this purpose. Here's a template repo that could help you get started. I'm on vacation so I can't provide more detail now, but when I'm back I'd be happy to explain further or meet to chat about this or anything else.

[rmorshea]

@wrabit, has the custom component interface worked well for you?