我需要根据 Asp.Net MVC4 中的用户选择来加载选项卡。每个选项卡元素都属于一个局部视图。每个局部视图都有自己的 knockout.js 绑定。
单击每个选项卡时,需要在先前选择的选项卡下方呈现部分视图。
这是一个代码片段
<div class="row-fluid top-pad-double" id="tabBasedGrowthDiv">
<ul class="nav nav-pills">
<li><a href="#tabCustomerInfo" data-toggle="tab" data-bind="click:$root.AddTab">CustomerInfo</a></li>
<li><a href="#tabPropertyInfo" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo</a></li>
<li><a href="#tabPropertyInfo1" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo1</a></li>
</ul>
<div class="tab-content pills pill-sections">
<div data-bind="template: { name: 'tabBasedGrowthTemplate', foreach: $root.tabs}"></div>
</div>
</div>
Knockout.js Html 模板
<script type="text/html" id="tabBasedGrowthTemplate">
<div class="tab-pane" >
<div class="pill-header clearfix">
<h3>Some title</h3>
<div class="pull-right">
<a href="#" class="btn btn-mini" data-toggle="button" rel="tooltip" data-title="lock this section here" data-placement="top"><i class="icon-lock"></i></a>
<a href="#" class="btn btn-mini" rel="tooltip" data-title="close this section" data-placement="left"><i class="icon-remove"></i></a>
</div>
</div>
<div class="pill-content" data-bind="attr:{id: $data.id}">
@Html.Partial("tab based partial view name")
</div>
</div>
</script>
这是视图模型的大致实现。
function TabBasedGrowthViewModel() {
var self = this;
self.tabs = ko.observableArray([TabViewModel]);
self.AddTab = function (){}
}
淘汰赛绑定
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new TabBasedGrowthViewModel(), $("#tabBasedGrowthDiv").get(0));
});
</script>
当我执行上述步骤时,我与渲染部分视图的主视图模型的敲除绑定发生冲突,因为它有自己的敲除绑定。只有当我使用上面小标题knockout
中所示的模板渲染部分视图时,我才会遇到这种冲突。Knockout.js Html Template
任何帮助将不胜感激。
提前致谢, Alphacoder