JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>

JavaScript

var metadata = {
    reference: {
        validValues: [
            {'id': 'default', 'label': 'Default'},
            {'id': 'value1', 'label': 'Value 1'},
            {'id': 'value2', 'label': 'Value 2'},
            {'id': 'value3', 'label': 'Value 3'}
        ]
    },
    components: [
        {
            id: 'name',
            label: 'label',
            template: 'select',
            value: 'default',
            validValues: 'reference.validValues'
        }
    ]
};

var mapping = {
    observe: ['value', 'reference'],
    copy: ['reference', 'validValues', 'id', 'name', 'template']
};

var viewModel = ko.mapping.fromJS({metadata: metadata}, mapping);
console.log(viewModel);