JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<script src="http://borismoore.github.io/jsrender/jsrender.js"></script>
<script type="text/x-jsrender" id="numbereditor">
    <div class="fieldeditor numbereditor">
        <label for="{{>Id}}">{{>Label}}</label>
        <input type="text"  id="{{> Id}}" Value="{{>Value}}" ></input>

    </div>


</script>

<script type="text/x-jsrender" id="texteditor">
    <div class="fieldeditor texteditor">
        <label for="{{>Id}}">{{>Label}}</label>
        <input type="text"  id="{{> Id}}" Value="{{>Value}}" ></input>

        
    </div>


</script>

<script type="text/x-jsrender" id="listeditor">
    <div class="fieldeditor listeditor">
        <label for="{{>Id}}">{{>Label}}</label>
        <input type="hidden" id="{{> Id}}" Value="{{>Value}}"></input>

        <select data-target="{{> Id}}" onchange="document.getElementById('{{:Id}}').value = this.value">
            <option value="" title=""/>
            {{for Options}}
            <option value="{{>Value}}" title="{{>Title}}" {{if #parent.parent.data.Value==Value }}selected="selected"{{/if}}>{{>Title}}</option>
            {{/for}}
        </select>
    </div>
</script>

<script type="text/x-jsrender" id="maintemplate">
    {{for Fields}}
    {{include tmpl='#' + Type + 'editor' /}}
    {{/for}}
</script>

<div id="result">
</div>

<button id="show">Show results</button>

<div id="result2"></div>

CSS

div {
    border : solid 1px red;
    padding:2px;
}

#result2 { white-space:pre; }

JavaScript

var data = {
    Fields: [{
        Id: "field1",
        Type: "number",
        Value: 5,
        Label: "Un nombre"
    }, {
        Id: "field2",
        Type: "number",
        Value: null,
        Label: "Un autre nombre"
    }, {
        Id: "field3",
        Type: "text",
        Value: "kkchose",
        initialValue: "kikoo lol",
        Label: "Un texte"
    }, {
        Id: "field4",
        Type: "list",
        Label: "Une liste",

        Value: 2,
        Options: [{
            Title: "Valeur 1",
            Value: 1
        }, {
            Title: "Valeur 2",
            Value: 2
        }, {
            Title: "Valeur 3",
            Value: 3
        }]
    }]
};


(function ($) {
    $("#result").html(
    $("#maintemplate").render(data));
    $("#show").click(function(){
        var result="";

        $.each(data.Fields, function(i, val){
            result += val.Label + ":" + $('#' + val.Id).val();
            result += "\n";
        });
        $('#result2').html(result);
    });
})(jQuery);