inputsample.hsp

{template inputSample(data)}
    <div class="info2">All the following inputs are synchronized:</div>
    <div class="section">
        Comment #1: <input type="text" value="{data.comment}"/><br/>
        Comment #2: <input type="text" model="{data.comment}"/><br/>
        Comment #3: <span class="textValue">{data.comment}</span>
    </div>
    <div class="section">
        <input id="cb1" type="checkbox" value="{data.isChecked}"/>
        <label for="cb1">Check me!</label> -
        
        <input id="cb2" type="checkbox" model="{data.isChecked}"/>
        <label for="cb2">Check me (2)!</label> -
        Checked: <span class="textValue">{data.isChecked}</span>
    </div>
    <div class="section">
        <input id="rb1" type="radio" model="{data.selection}" value="A"/>
        <label for="rb1">Select A</label> -
        
        <input id="rb2" type="radio" model="{data.selection}" value="B"/>
        <label for="rb2">Select B</label> -
        
        <input id="rb3" type="radio" model="{data.selection}" value="C"/>
        <label for="rb3">Select C</label> -
        Selection in model:<span class="textValue">{data.selection}</span>
    </div>
    <div class="section">
        Input with dynamic type: 
        <input type="{data.dtype}" value="{data.comment}" style="width:100px"/> -
        change type: <input type="text" value="{data.dtype}" style="width:100px"/>
    </div>
{/template}

var d={comment:"edit me!", isChecked:false, selection:"B", dtype:"text"}

// display the template in the #output div
inputSample(d).render("output");