JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>

<language-picker>
  
  <select data-bind="value: selectedLanguage">
    <option value="en" selected>English</option>
    <option value="sp">Spanish</option>
  </select>
  
</language-picker>

JavaScript

ko.components.register('language-picker', {
	template: `<!-- ko template: { 
  	nodes: $componentTemplateNodes, afterRender: afterRender
  } --><!-- /ko -->`,
  viewModel: function() {
    var vm = this;
		vm.selectedLanguage = ko.observable();
    vm.afterRender = function() {
      vm.selectedLanguage.subscribe(function(newLanguageSelected) {
        alert(newLanguageSelected + " selected.  Now post to the server");
      });        
    };
    
  }  
});

ko.applyBindings({});