Question

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

基本上，我有一个基础“_Editor.cshtml”页面，它使用partials使用查询参数在我的显示中呈现特定的编辑器内容。考虑图表的编辑器（折线图与条形图）。

_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。您可以将这两个值都放入viewmodel中，以允许多个自定义选项卡。

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

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

1 个答案: