[英]How do I dynamically show more bootstrap tabs in a _Layout template?
I have an existing site using MVC and a _Layout page using a sectional control for the render. 我有一个使用MVC的现有站点和一个使用分段控件进行渲染的_Layout页面。 We are using bootstrap tabs throughout for data displays.
我们一直在使用引导程序选项卡进行数据显示。
I have simplified this setup, but there are other VMs binding to this page, so I can't bind to the whole page, which would be the easy route for what I need. 我简化了此设置,但是还有其他VM绑定到此页面,因此我无法绑定到整个页面,这将是我所需的简单方法。
I want to have a dynamic amount of tabs being rendered like: 我想让动态数量的标签呈现为:
<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>
}
How can I get the tabs to also reproduce like this when they are in a separate sectional control and not within the same data-binding area? 当这些选项卡位于单独的分区控件中且不在同一数据绑定区域中时,如何获得同样重现的选项卡?
@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>
}
I am not sure if this is the best way to do it, or if this is the best way to use knockout... but I think I have figured out how to do this. 我不确定这是否是最好的方法,还是使用淘汰赛的最好方法……但是我想我已经弄清楚了如何做到这一点。 I have bound the
ViewModel
to multiple sections in separate applyBindings
calls. 我已经将
ViewModel
绑定到单独的applyBindings
调用中的多个部分。 I haven't seen this as a solution or suggestion before so I am not sure if there are side-effects. 之前我还没有将其视为解决方案或建议,所以我不确定是否有副作用。
A fiddle: Knockout multi-binding showing the functioning solution I propose. 一个小提琴: 淘汰赛多重绑定显示了我提出的功能解决方案。 I defined the nav tabs like so:
我定义了导航标签,如下所示:
<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>
I defined the tab context like so (and a vm/div as a separator): 我这样定义了标签上下文(以及一个vm / 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>
And finally, I bound everything a little double time. 最后,我把所有东西都束缚了一点时间。
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'));
I think this is the correct way to approach this. 我认为这是解决此问题的正确方法。 It works well enough when the page renders.
页面呈现时,效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.