Is it possible to add dynamic jQuery tabs using KnockoutJS Templates? - jquery-ui

Question

I'm trying to build a dynamic display in a web page. The site is built in ASP.NET MVC 3, but I'm not sure if this matters...
Essentially, I have a base "_Editor.cshtml" page which uses partials to render the specific editor content in my display using query parameters. Consider an editor for a chart (line chart vs. bar chart).
_Editor.cshtml
<div id='tabs'>
<ul>
<li><a href='#queryTab'>Define Query</a></li>
<!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
<!-- ko template: 'tabNames' -->
<!-- /ko -->
<li><a href='#themeTab'>Styles and Themes</a></li>
</ul>
<div id='queryTab'>
<!-- configure db connection, tables, fields, etc... (not important) -->
</div>
<!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
<!-- ko template: 'tabContent' -->
<!-- /ko -->
<div id='themeTab'>
<!-- show various style options here (not important) -->
</div>
</div>
<script type="text/javascript">
$(function(){
var vm = { /* define my model here */ };
ko.applyBindings(vm);
$("#tabs").tabs();
});
</script>
#if (Model.EditorType == ChartTypes.Bar) {
#Html.Partial("_BarChartEditor")
} else if (Model.EditorType == ChartTypes.Line) {
#Html.Partial("_LineChartEditor")
}
_BarChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Bar Chart Tab!</li>
<!-- I could have many more tab names here -->
</script>
<script id="tabContent" type="text/html">
<div id="barChartTab">
<h1>Add controls for bar chart configuration</h1>
</div>
<!-- I would create a div for each tab name above here -->
</script>
_LineChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Line Chart Tab!</li>
</script>
<script id="tabContent" type="text/html">
<div id="lineChartTab">
<h1>Add controls for line chart configurations</h1>
</div>
</script>
Sorry for the lengthy code drop (it took a long time to write it all here, so have mercy on me). :) I wanted to make sure that my problem was understood because of the way I'm building my editors using custom partials. Perhaps it's cludgy, but it works for the most part...
Really, everything works great except for the tab content. The tab rendering appears to be happening before I'm able to bind my view model to the UI. When the 'ko.applyBindings()' method is called, the tab shows up on different tabs.
Has anybody tried to do this? Has anybody had success? I've created a jsfiddle to show a simple scenario to show exactly what I'm talking about:
http://jsfiddle.net/TrailHacker/j2nhm/
Thanks for any help!

Answer 1

I actually got it working with your example, your content template was just structured incorrectly. It was missing the <div> tags.
If you modify this for your example, just remember that the div id needs to match the link's ref. You can throw both of these values into your viewmodel, to allow for multiple custom tabs.
http://jsfiddle.net/tyrsius/UCGRZ/