JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rniemeyer.github.com/knockout-kendo/js/kendo.web.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<!-- ko with: Menu -->
<ul data-bind="foreach: Items">
<li data-bind="click: Click"><a href="#" data-bind="text: Text"></a></li>
</ul>
<!-- ko with: SelectedItem-->
<div data-bind="template: { name: TemplateName(), data: ContentViewModel }">
</div>
<!-- /ko -->
<!-- /ko -->
<script type="text/html" id="content1">
<textarea id="editor" rows="10" cols="20" style="width: 600px; height:300px"> </textarea>
<hr />
</script>
<script type="text/html" id="content2">
another content<br/>
</script>
JavaScript
var MenuItem = function() {
var self = this;
self.Text = ko.observable();
self.TemplateName = ko.observable();
self.ContentViewModel = ko.observable();
self.Clicked = Object;
self.Initialize = function(text, templateName, viewModel, clickHandler) {
self.Text(text);
self.TemplateName(templateName);
self.ContentViewModel(viewModel);
self.Clicked = clickHandler;
};
self.Click = function(data) {
if (self.Clicked) {
self.Clicked(self, data);
}
};
};
var Menu = function() {
var self = this;
self.Items = ko.observableArray([]);
self.SelectedItem = ko.observable();
self.AddMenuItem = function(text, templateName, viewModel, clickedHandler) {
var mi = new MenuItem();
mi.Initialize(text, templateName, viewModel, function(vm, data) {
self.SelectedItem(vm);
clickedHandler(vm, data);
});
self.Items.push(mi);
return mi;
};
};
var Content1ViewModel = function() {
var self = this;
self.Load = function() {
$("#editor").kendoEditor();
};
};
var Content2ViewModel = function() {
var self = this;
self.Load = function() {};
};
var ViewModel = function() {
var self = this;
var content1VM = new Content1ViewModel();
var content2VM = new Content2ViewModel();
var industryTypes = null;
self.Load = function(menuItem) {
menuItem.ContentViewModel().Load();
};
self.Menu = ko.observable(new Menu());
self.Menu().AddMenuItem('show Kendo editor', "content1", content1VM, self.Load);
self.Menu().AddMenuItem('show other content', "content2", content2VM, self.Load);
};
$(function() {
ko.applyBindings(new ViewModel());
});