JSFiddle - React, Tailwind, and code Playground

by Dennis Williams

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="c">
  <select data-bind="options: props"></select>
  <input data-bind="value: field">
  <span data-bind="text: val"></span>
</div>

JavaScript

function ViewModel() {
  var vm = {
    props : ko.observableArray(["A","B"]),
    field: ko.observable(""),
    val: "Some value"
  };

  vm.field.subscribe(function() {
    vm.props.push("C");
  });

  return vm;
}

var myVM = new ViewModel();
ko.mapping.fromJS(myVM, myVM);
ko.applyBindings(myVM, document.getElementById("c"));