JSFiddle - React, Tailwind, and code Playground

by zachpainter77

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div style="margin-bottom:20px;height:150px;">
  <div  style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
      Products<br/>
       <select id="slSoftProducts" multiple="true" data-bind="options: ProductList,optionsText: 'ProductName', optionsValue: 'SoftProId', selectedOptions: SelectedProducts"></select>   
  </div>
  <div style="margin-top: 10px; width: 200px; float: left; font-weight: bold; margin-left: 30px;">
       Priority Levels<br/>
       <select id="slPriorityLevels" multiple="true" data-bind="options: PriorityList, optionsText:'PriorityName', optionsValue:'PriorityId', selectedOptions: SelectedPriorities"></select>
  </div>
</div>


<div >
        <textarea rows="20" cols="100" data-bind="text: ko.toJSON($data, null, 2)"></textarea>
    </div>

JavaScript

//DTO objects definition for mapping
var SoftProduct = function(dto){
	var self = this;
  self.ProductName = ko.observable(dto.ProductName);
  self.SoftProId = dto.SoftProId;
};

var Priority = function(dto){
	var self = this;
  self.PriorityId = dto.PriorityId;
  self.PriorityName = ko.observable(dto.PriorityName);
};

//Output from Razor "@Html.Raw(Model)"
//I.E. var BugList = @Html.Raw(Model)
var BugList = {
	SoftwareProductList: [
  	{ ProductName: "eCommerce Website", SoftProId: 1},
    { ProductName: "Banking Website", SoftProId: 2},
  ],
  PriorityLevels: [
  	{PriorityId: 1, PriorityName: "P1"},
    {PriorityId: 2, PriorityName: "P2"},
    {PriorityId: 3, PriorityName: "P3"},
  ]
};

//define main view model to apply bindings to
var bugzillaviewmodel = function(){
    var self = this;
    self.ProductList = ko.mapping.fromJS([]);
    self.PriorityList = ko.mapping.fromJS([]);
    self.SelectedProducts = ko.observableArray();
    self.SelectedPriorities = ko.observableArray();
};


  //init viewModel
  var viewModel = new bugzillaviewmodel();

  //map data in BugList to viewmodel
   ko.mapping.fromJS(
                   BugList.SoftwareProductList,
                   {
                       key: function (data) {
                           return ko.utils.unwrapObservable(data.SoftProId);
                       },
                       create: function (options) {
                           return new SoftProduct(options.data);
                       }
                   },
                   viewModel.ProductList);
   ko.mapping.fromJS(
                   BugList.PriorityLevels,
                   {
                       key: function (data) {
                           return ko.utils.unwrapObservable(data.PriorityId);
                       },
                       create: function (options) {
                           return new Priority(options.data);
                       }
                   },
                   viewModel.PriorityList);

 ...