JSFiddle - React, Tailwind, and code Playground

by Muhammad Raheel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<p data-bind="foreach:List">
	Question :<label data-bind="text:Question"></label> <br />
	Asked By <label data-bind="text:AskedBy"></label> at <label data-bind="text:Date"></label>
	<br />
	<button data-bind="$root.DisplayForm">Reply</button>
	<button data-bind="$root.DisplayForm">Assign To</button>
	<br />
</p>
<div data-bind="template: { name: 'form', data: $root }"></div>

<script type="text/html" id="form">
	<textarea data-bind="text:Text"></textarea>
	<button data-bind="$root.Send">Send</button>
</script>

JavaScript

var list = [
	{
		Question : 'Josh Question',
		AskedBy : 'Janks McJankerson',
		Date : '2014-06-19 17:47:00',
		Editable : false
	},
	{
		Question : 'YYY',
		AskedBy : 'Janks McJankerson',
		Date : '2014-06-18 11:14:00',
		Editable : false
	}
]
function test(){
	var self = this

	self.List = ko.observableArray(list)
	self.Text = ko.observable()
	self.DisplayForm = function(){
		
	}
	self.Send = function(){
		console.log('form is being sent here')
	}
}

ko.applyBindings(new test())