mimic-into

Syntax

mimic-into: (selector) [every (time)] [after (time)];

Non-variable data-binding! It is not a full replacement for data-binding variables but is very simple to set up and might suit your needs. See the variables documentation if you want actual data-binding. This "mimic-into" command works on the browser page title as well, if you need that, as that isn't something data-binding can do.

This command dynamically copies the contents of a target selector into a specified element. The concept is to "mimic the contents of one area into the contents of another area". It is always a one-way flow, but you can set up two-way "binding" by just setting up the action in the opposite element.

Try out the examples below - they are not hard to understand once you get the idea of one thing changing another thing.

This command inserts the contents from the target selector into either the value of the element (for inputs and textareas), or the innerText property (for other elements). If you want to update something from an input field, you can trigger it with the "input" event as per the examples below.

References:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

mimic-into

Results:

Change browser page title:

Form example with reset

Using mimic with form fields will make the result areas respond to reset.

Reset example

.mimicTwoWay:input {
    mimic-into: #mimicFieldInput{@data-target};
}

#mimicField1:draw {
    mimic-into: #resultField1;
}

#mimicField1:input {
    mimic-into: #resultField1;
}

#mimicField2:draw {
    mimic-into: title, #mimicFormField6;
}

#mimicField2:input {
    mimic-into: title, #mimicFormField6;
}

.mimicClass:draw {
    mimic-into: #resultOfMimic{@data-ref};
}

.mimicClass:input {
    mimic-into: #resultOfMimic{@data-ref};
}

#mimicFormField6:input {
    mimic-into: title, #mimicField2;
}

#mimicForm:reset {
    #mimicFormField6 {
        mimic-into: title, #mimicField2;
    }
}

<p><input id="mimicFieldInput1" class="mimicTwoWay" data-target="2" type="text" placeholder="Two-way flow field A"></p>
<p><input id="mimicFieldInput2" class="mimicTwoWay" data-target="1" type="text" placeholder="Two-way flow field B"></p>


<p><input id="mimicField1" type="text" placeholder="Type here to change the result below."></p>
<p>Results: <span id="resultField1"></span>

<p>Change browser page title: <input id="mimicField2" type="text" value="mimic-into" placeholder="Type here"></p>

<h4>Form example with reset</h4>
<p>Using mimic with form fields will make the result areas respond to reset.</p>
<form id="mimicForm">
    <p><input id="mimicFormField1" class="mimicClass" data-ref="1" type="text" placeholder="Mimic to A" value="Cheryl"></p>
    <p>A: <span id="resultOfMimic1"></span></p>
    <p><input id="mimicFormField2" class="mimicClass" data-ref="2" type="text" placeholder="Mimic to B"></p>
    <p>B: <span id="resultOfMimic2"></span></p>
    <p><input id="mimicFormField3" class="mimicClass" data-ref="3" type="text" placeholder="Mimic to C" value="Bob"></p>
    <p>C: <span id="resultOfMimic3"></span></p>
    <p><input id="mimicFormField4" class="mimicClass" data-ref="4" type="text" placeholder="Mimic to D"></p>
    <p>D: <span id="resultOfMimic4"></span></p>
    <p><input id="mimicFormField5" class="mimicClass" data-ref="5" type="text" placeholder="Mimic to E" value="Dave"></p>
    <p>E: <span id="resultOfMimic5"></span></p>
    <p>Browser page title: <input id="mimicFormField6" type="text" value="mimic-into" placeholder="Type here"></p>
    <input type="reset" value="Reset form">
</form>

Action commands: media-control Action commands: pause