JSFiddle - React, Tailwind, and code Playground

by madcapnmckay

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<form action="/Task/Create" data-bind="submit: save"> 

    <table border="1">
        <tr>
            <td>ref type</td>
            <td><select data-bind="options: ReferenceTypes, optionsText: 'Name', optionsCaption: 'Select...', optionsValue: 'Id', value:Task.ReferenceTypeId"></select></td>
            <td>Reference</td>
            <td><input data-bind="value: Task.Reference" /></td>
        </tr>
    </table><br/>

    Selected ref type:
    <label data-bind="text:Task.ReferenceTypeId"></label><br/>
    Ref string
    <label data-bind="text:Task.Reference"></label><br/>
    
    <button type="submit">Save Listings</button> 
</form>

JavaScript

var result= {
   "ContentEncoding":null,
   "ContentType":null,
   "Data":{
      "Task":{
         "ReferenceTypeId":0,
         "Reference":"Default Value"
      },
      "ReferenceTypes":[
         {
            "Id":2,
           "Name":"A Ref Type"
         },
         {
            "Id":3,
            "Name":"B Ref Type"
         },
         {
            "Id":1,
            "Name":"C Ref Type"
         }
      ]
   },
   "JsonRequestBehavior":1
};
    
var viewModel = {};
viewModel = ko.mapping.fromJS(result.Data);
console.log(JSON.stringify(viewModel));

viewModel.save = function () {
    console.log(ko.toJSON(viewModel));
} 

 ko.applyBindings(viewModel);