我正在尝试在网页中构建动态显示。该网站是用 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/
谢谢你的帮助!