WinnetouJs Fx

∯ Purpose

Fx is a WinnetouJs method that stores a js function and returns it name as string. It`s useful when you pass function to constructos props.

∯ Syntax

fx(fn:function, ...args:string[])

∯ Returns

String

∯ Use Cases

Without any arguments

WinnetouJs fx


[components.html]
<winnetou>
    <button id="[[button]]" onclick="{{action}}">{{text}}</button>
</winnetou>

[app.js]
import {Winnetou} from 'winnetoujs';
import {button} from './constructos/components';
...
button({
    text:`Click me!`,
    onclick: Winnetou.fx(() => alert(`You just clicked me!`))
}).create(`#app`)

With this argument

To use this, add quotes. In the example below, we use "this" to send self button reference as parameter to function.

WinnetouJs fx

  
...
button({
    text:`Click me!`,
    onclick: Winnetou.fx(el => (el.style.color = "white"), "this"),
}).create(`#app`)

With string argument

WinnetouJs fx

    
...
button({
    text:`Click me!`,
    onclick: Winnetou.fx(txt => {
        alert(txt);
        }, "it works!"),
}).create(`#app`)

With multi arguments

WinnetouJs fx


...
button({
    text:`Click me!`,
    onclick: Winnetou.fx(
        (el1, el2) => {
        Winnetou.select(el1).hide();
        Winnetou.select(el2).hide();
        },
        div1,
        div3
    ),
},
}).create(`#app`)