javascript - knockout 绑定(bind)在 foreach 绑定(bind)中中断

Question

我有一个 foreach 绑定(bind)，如下所示:

<ul class="nav nav-tabs" data-bind="template: { name: 'tablsUlTemplate', foreach: Operators }">
    <li class="active"><a href="#summary" data-toggle="tab">Summary</a></li>
    <li><a href="#permitting" data-toggle="tab">Permitting</a></li>
</ul>
<script type="text/html" id="tablsUlTemplate">
    <li><a data-bind="attr: { href: NameHash }" data-toggle="tab"><span data-bind="text: Name"></span></a></li>
</script>

原因是有两个选项卡始终存在，并且我根据是否添加了其他选项卡来添加其他选项卡。

问题不在于上面，而在于选项卡内容，该部分看起来与上面类似，只是很多，所以决定至少显示 1 个完整的部分。

然后我就有了(损坏的部分)

<div class="tab-content" data-bind="template: { name: 'tablsContentTemplate', foreach: Operators }" >
    <div class="tab-pane active" id="summary">
    </div>
    <div class="tab-pane" id="permitting">
        <table class="span10">
            <thead>
                <tr>
                    <th></th>
                    <th>Submission
                    </th>
                    <th>Approval
                    </th>
                    <th>Timeline
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-bind="visible: PermittingCAAActive">
                    <td>
                        <label class="checkbox">
                            CAA
                        </label>
                    </td>
                    <td>
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-th"></i></span>
                            <input id="text12" type="text" readonly="true" class="spandate" runat="server" data-bind="value: PermittingCAASubmission" />
                        </div>
                    </td>
                    <td>
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-th"></i></span>
                            <input id="text13" type="text" readonly="true" class="spandate" runat="server" data-bind="value: PermittingCAAApproval" />
                         </div>
                    </td>
                    <td>
                        <div class="input-prepend">
                            <input id="text14" type="text" readonly="true" class="spandate" runat="server" data-bind="value: PermittingCAATimeline" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

我的问题是 foreach 绑定(bind)内的绑定(bind)不起作用。

请注意虚拟机:

viewModel = {
    Operators: ko.observableArray(),
    PermittingCAAActive : ko.observable(),
    PermittingCAAApproval : ko.observable(),
    PermittingCAASubmission: ko.observable(),
    PermittingCAATimeline: ko.observable(),
}

请注意，我省略了与问题无关的内容。

Answer 1

我建议不要将固定内容与模板内容混合，可能使用虚拟元素，如下所示:

<ul>
    <li data-bind="text: PermittingCAAActive"></li>
    <!-- ko template: {name: 'tablsUlTemplate', foreach: Operators} -->
    <!-- /ko -->
</ul>

<script type="text/html" id="tablsUlTemplate">
    <li><a data-bind="attr: { href: NameHash }" data-toggle="tab"><span data-bind="text: Name"></span></a></li>
</script>

这将使绑定(bind)更易于管理。