JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<script src="http://andersmalmgren.github.io/Knockout.BindingConventions/src/Knockout.BindingConventions.js"></script>
<div data-name="editors">
    <div data-name="$data"></div>
</div>

<script id="CheckboxEditorView" type="text/html">
    <input data-name="value" type="checkbox" />
</script>

<script id="InputEditorView" type="text/html">
    <input data-name="value" />
</script>

<script id="DropdownEditorView" type="text/html">
    <select data-name="options" />
</script>

JavaScript

MyApp = {};
MyApp.Editors = {
    InputEditorViewModel: function(data) {
        this.value = ko.observable(data.value);
    },
    CheckboxEditorViewModel: function(data) {
        this.value = ko.observable(data.value);
    },
    DropdownEditorViewModel: function(data) {
        this.selectedOption = ko.observable(data.value);
        this.options = data.options;
    }
};

MyApp.MasterViewModel = function(data) {
    this.editors = ko.utils.arrayMap(data, function(item) {
        return new MyApp.Editors[item.type + "EditorViewModel"](item);
    });
};

var dataFromSerer = [
    { 
        value: false,
        type: "Checkbox"
    },
    { 
        value: "Test",
        type: "Input"
    },
    {
        value: "2",
        type: "Dropdown",
        options: ["1", "2", "3"]
    }
];
    
ko.bindingConventions.init({ roots: [MyApp] });
ko.applyBindings(new MyApp.MasterViewModel(dataFromSerer));