Question

我有一个使用MVC的现有站点和一个使用分段控件进行渲染的_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>
}

Answer 1

我不确定这是否是最佳方式，或者这是否是使用淘汰赛的最佳方式......但我想我已经想出如何做到这一点。我已将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模板中动态显示更多引导选项卡？

1 个答案: