JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<script src="http://gvas.github.com/knockout-jqueryui/js/lib/knockout-jqueryui.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
	<button data-bind="click: btnCreate">Create Object</button>
	<button data-bind="click: btnClear">Clear Object</button>
    <input type="text" data-bind="value : tb" />
	<div id="contentDiv">
		<table>
			<tbody data-bind="foreach: viewModels">
				<tr>
					<td>
					<span data-bind="visible: func1($element, $data)">Test span</span>
                    <button data-bind="click: $parent.changeValue">ChangeValue</button>                        
					<button data-bind="click: $parent.removeViewModel">Remove</button>
					</td>
				</tr>			
			</tbody>
		</table>
        <button data-bind="click: btnClick">change element text</button>
        <span data-bind="widget: spanElement"></span>
	</div>

CSS

.hover {
    border: thin solid silver;
}

JavaScript

ko.bindingHandlers.widget = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var elemObservable = valueAccessor();
        if (ko.isObservable(elemObservable)) {
			elemObservable(element);
		}
    }
};

         var mainClass = function () {
			var main = function (){
					
			};
			
			var that = new main();
			
			that.prop1 = ko.observable();

			that.func1 = function (e, d) {
				
                $(e).text(d.prop1());
                return true;
			};
			
			var init = function () {
				
			};
			
			init();
			return that;
		};
		


		$(function () {
			var vm = function () {
				var self = this;
				self.counter = 0;
				self.viewModels = ko.observableArray([]);
				self.removeViewModel = function () {
					self.viewModels.remove(this);
				};
                
				self.btnCreate = function (){
					var testMain = mainClass();
					self.viewModels.push(testMain);		
				};
				self.btnClear = function() {
					self.viewModels([]);
				};
                self.tb = ko.observable('test');
                self.changeValue = function (){
                    this.prop1(self.tb());
                };
                self.spanElement = ko.observable();
                self.btnClick = function (){
                    var elem = self.spanElement();
                    $(elem).html("This is the span element");
                };
			};		
			ko.applyBindings(new vm());
		});