Javascript 如何在布局模板中动态显示更多引导选项卡?
我有一个使用MVC的现有站点和一个使用分段控件进行渲染的_布局页面。我们一直在使用引导选项卡来显示数据 我简化了这个设置,但是还有其他虚拟机绑定到这个页面,所以我不能绑定到整个页面,这将是满足我需要的简单途径 我希望动态呈现大量选项卡,如下所示:Javascript 如何在布局模板中动态显示更多引导选项卡?,javascript,asp.net-mvc,twitter-bootstrap,knockout.js,twitter-bootstrap-3,Javascript,Asp.net Mvc,Twitter Bootstrap,Knockout.js,Twitter Bootstrap 3,我有一个使用MVC的现有站点和一个使用分段控件进行渲染的_布局页面。我们一直在使用引导选项卡来显示数据 我简化了这个设置,但是还有其他虚拟机绑定到这个页面,所以我不能绑定到整个页面,这将是满足我需要的简单途径 我希望动态呈现大量选项卡,如下所示: <div class="panel panel-default"> <div id="tabContentParent" class="tab-content"> <div class="tab-p
<div class="panel panel-default">
<div id="tabContentParent" class="tab-content">
<div class="tab-pane active" id="result">
<!-- various details of a report -->
</div>
<!-- ko foreach: myVM -->
<div class="tab-pane" data-bind="attr: {'id': reportId}">
<!-- various bindings for reports -->
</div>
<!-- /ko -->
</div>
</div>
@section scripts
{
@Scripts.Render("~/Areas/Results/VMs/myVM.js")
<script type="text/javascript">
app.myVM.load();
ko.applyBindings(app.myVM, document.getElementById('tabContentParent'));
</script>
}
@节脚本
{
@Scripts.Render(“~/Areas/Results/VMs/myVM.js”)
app.myVM.load();
应用绑定(app.myVM,document.getElementById('tabContentParent');
}
当选项卡位于单独的分区控件中而不在相同的数据绑定区域中时,如何使它们也像这样复制
@section controls
{
<ul class="nav nav-tabs section-controls">
<li class="active"><a href="#result" data-toggle="tab">Details</a></li>
<li class="hidden" id="tab1"><a href="#report1" data-toggle="tab">Report 1</a></li>
<li class="hidden" id="tab2"><a href="#report2" data-toggle="tab">Report 1</a></li>
<!-- etc., etc. -->
</ul>
}
@节控件
{
}
我不确定这是否是最好的方法,或者这是否是使用knockout的最好方法。。。但我想我已经知道怎么做了。我已在单独的applyBindings
调用中将ViewModel
绑定到多个部分。我以前没有将此视为解决方案或建议,因此我不确定是否有副作用
一把小提琴:展示我提出的有效解决方案。我对导航选项卡的定义如下:
<div>
<ul class="nav nav-tabs section-controls" id="vm1Id2">
<li class="active"><a href="#result" data-toggle="tab">Details</a></li>
<!-- ko foreach: tabInfos -->
<li>
<a data-bind="text: text, attr:{ href: '#' + url }" data-toggle="tab"></a>
</li>
<!-- /ko -->
</ul>
</div>
我认为这是正确的方法。当页面呈现时,它工作得足够好
<div id="vm2Id">
<p>
<label data-bind="text: message"></label>
</p>
</div>
<div class="panel panel-default">
<div id="vm1Id1" class="tab-content">
<div class="tab-pane active" id="result">
<label>Some data displayed here</label>
</div>
<!-- ko foreach: newTabs -->
<div class="tab-pane" data-bind="attr: {'id': $data}">
<label data-bind="text: $data"></label>
</div>
<!-- /ko -->
</div>
</div>
var ViewModel1 = function() {
var newTabs = ko.observableArray(["report1", "report2"]);
var tabInfos = ko.observableArray([{text: "Report 1", url: "report1"}, {text: "Report 2", url: "report2"}]);
return {
newTabs: newTabs,
tabInfos: tabInfos
};
};
var ViewModel2 = function() {
var message = ko.observable("This is a message as a space holder");
return {
message: message
};
};
var vm1 = new ViewModel1();
var vm2 = new ViewModel2();
ko.applyBindings(vm1, document.getElementById('vm1Id1'));
ko.applyBindings(vm1, document.getElementById('vm1Id2'));
ko.applyBindings(vm2, document.getElementById('vm2Id'));