Mutables

Winnetou FX

Winnetou FX is a method that allows you to create functions within props, so that event handlers such as onClick, onChange and onFocus can be handled.

post.html



<winnetou>
    <div
        id="[[post]]"
        onclick="{{action}}"
        style="
            border: 2px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            width: 200px;
            cursor: pointer;
        "
    >
        <h1>{{name}}</h1>
        <h2>{{status}}</h2>
        <p>{{message}}</p>
        <i>{{likes}} Likes</i>
    </div>
    </winnetou>

postHandler.js



let status = Winnetou.initMutable('Offline');
post({
    likes: '202',
    message: "I'm so excited about WinnetouJs!",
    name: "Peterson M.",
    status: {
        mutable: status,
    },
    action: Winnetou.fx(() => {
        console.log('Clicked from constructo!')
        Winnetou.setMutable(status, "Online");
    }),
}).create("#app");