Bind datas to your component ​

Linking data to a component can be done via attributes, just like for classic HTML elements the x- prefix refers to dynamic data. It is possible to pass data dynamically through the components.

The data entered in the attributes without the x- prefix are raw data, they can be retrieved directly from the component and manipulated as desired:

<x-component name="John Doe"></x-component>

define('component', function(datas, render){
    render(/*html*/`
        <p x-text="name"></p>
    `)
})

The data entered in the attributes with the x- prefix are dynamic data that is passed to another component, so they can be used for one-sided dynamic communication between the components.

<x-parent name="John Doe"></x-parent>

define('parent', function(datas, render){
    setTimeout(()=> datas['name'] = 'Jane Doe', 1000)
    render(/*html*/`
        <x-child x-name="name"></x-child>
    `)
})

define('child', function(datas, render){
    render(/*html*/`
        <p x-text="name"></p>
    `)
})