JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

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


<label>Select a page:</label><input type="button" data-bind="click: function(){CurrentPage(PageOne)}" value='1'/><input type="button" data-bind="click: function(){CurrentPage(PageTwo)}" value='2'/>
<br/><br/>


<div style="border: 1px solid blue;" data-bind="template: { data: CurrentPage, name: CurrentTemplate }"></div>


<script type="text/html" id="viewOne">
	<h4>Page One</h4>
</script>

<script type="text/html" id="viewTwo">
	<h4>Page Two</h4>
</script>

JavaScript

function viewModel(){
	var self = this;

	this.PageOne = new pageOneVM();
	this.PageTwo = new pageTwoVM();
	
	this.CurrentPage = ko.observable(this.PageOne);
	this.CurrentTemplate = ko.pureComputed(function(){
		return self.CurrentPage().TemplateName;
	});
}

function pageOneVM(){
	var self = this;
	
	this.TemplateName = 'viewOne';
}

function pageTwoVM(){
	var self = this;
	
	this.TemplateName = 'viewTwo';
}

ko.applyBindings(new viewModel());