是否可以使用 KnockoutJS 模板添加动态 jQuery 选项卡？

Question

我正在尝试在网页中构建动态显示。该网站是在 ASP.NET MVC 3 中构建的，但我不确定这是否重要......

基本上，我有一个基本的“_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/