KnockoutJSテンプレートを使用して動的なjQueryタブを追加することはできますか？

Question

私は、Webページに動的な表示を作成しようとしています。このサイトはASP.NET MVC 3でビルドされていますが、これが問題なのかどうかはわかりません。

基本的に、私はパーツを使用して、特定のエディタの内容を表示するbase "_Editor.cshtml"クエリパラメータを使用して表示します。グラフのエディタを考えてみましょう（折れ線グラフと棒グラフ）。

_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><a href="#barChartTab">Bar Chart Tab!</a></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><a href="#lineChartTab">Line Chart Tab!</a></li> 
</script> 

<script id="tabContent" type="text/html"> 
    <div id="lineChartTab"> 
    <h1>Add controls for line chart configurations</h1> 
    </div> 
</script> 

長いコードを残念に思って申し訳ありません（ここにすべてを書き込むのに時間がかかりましたので、私には慈悲があります）。 :)カスタムパーシャルを使用してエディタを構築する方法のために、私の問題が理解されていることを確認したかったのです。おそらくそれは固いですが、それはほとんどの部分で動作します...

本当にすべてはタブの内容を除いて素晴らしいです。ビューのモデルをUIにバインドする前に、タブのレンダリングが行われているようです。 'ko.applyBindings（）'メソッドが呼び出されると、タブが別のタブに表示されます。

誰かがこれをやろうとしましたか？誰も成功したのですか？私は私が話している正確に何を表示するには、単純なシナリオを表示するためにjsfiddleを作成しました：任意の助け

http://jsfiddle.net/TrailHacker/j2nhm/

感謝を！

Answer 1

実際にあなたの例を使って作業していますが、あなたのコンテンツテンプレートはちょうど正しく構成されていません。 <div>タグがありませんでした。

これを変更する場合は、divのIDがリンクのrefと一致する必要があることを覚えておいてください。これらの値を両方ともビューモデルに投げて、複数のカスタムタブを使用することができます。

http://jsfiddle.net/tyrsius/UCGRZ/