如何在_Layout模板中动态显示更多引导选项卡？

问题描述：

我有一个使用MVC的现有站点和一个使用分段控件渲染的_Layout页面。我们在整个数据显示中使用引导标签。如何在_Layout模板中动态显示更多引导选项卡？

我简化了这个设置，但也有其他的虚拟机绑定到这个页面，所以我不能绑定到整个页面，这将是我需要的简单路线。

我想有标签的动态量正在呈现这样的：

<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> 
}

我怎样才能标签也复制这样，当他们在一个单独的分段控制和非同一数据 - 中绑定区域？

@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> 
}

答

我不知道这是否是做的最好的办法，或者如果这是用淘汰赛的最佳方式......但我想我已经找到了如何做到这一点。我已将ViewModel绑定到单独的applyBindings调用中的多个部分。我之前并没有将此视为解决方案或建议，所以我不确定是否存在副作用。

小提琴：Knockout multi-binding显示我提议的功能解决方案。我这样定义的导航标签这样：

<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>

我定义的标签背景下，像这样（和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>

最后，我必将一切有点双倍时间。

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'));

我认为这是解决这个正确的方法。它在页面呈现时效果不错。

如何在_Layout模板中动态显示更多引导选项卡？

相关推荐