chekhov

Chekhov

Chekhov Js Framework

Note

Although, Chekhov.JS (further ch.js) is a JS framework,

it does not act like one you usually see and you should always keep that in mind

Remember that the script file should always be included after the closing tag

Key elements

The first thing you'll need when using ch.js is the values object

let values =
    {
        all_kinds_of_data_you_need: all_the_values_you_need
    }

then it's time to make a

new Chekhov()

like this

    let ch = new Chekhov({
        reactive: {
        // That's an example of a computed property
            msg: function () {
                if (values.name == "")
                    return "What's your name?"
                else
                    return `Bye ${values.name}! It was Great to meet you!`
            }
        }
    }, values)

due to simpilcity of the framework it requires you to do a few things manually

but it still provides some handy shortcuts

    <div ch-for linked="array" trigger="_iterator">
        <h1 class="central" ch-bind>{{iterator}}</h1>
    </div>

for repeating something a few times but it requires setting up a computed property, that's pretty easy though

            _iterator: function (i) {
                return values.array[i]
            }

There's also ch-if

<li ch-if linked="value">To display or not to display 💀</li>

<button ch-model trigger="click" linked="switch">Continue</button>

to call the linked method when the trigger event happens

A little more

        <input ch-model linked="name" dep="msg" trigger="input"/>

is used for calling the linked method when the trigger event happens

Most important one

Behold

 <h1 ch-bind>{{some_value}}</h1>

which binds the inner value of the element to the property or a value contained in ch.data (e.g. ch.data.msg)