0

我有一个看起来像的 foreach 绑定：

<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 绑定中的绑定不起作用。

请注意虚拟机：

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

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

4

2 回答 2

1 
//  data-bind="template: { name: 'tablsContentTemplate', foreach: Operators }"

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

让我们检查上面的绑定，在使用 foreach 之后，您的值绑定期望在其中一个运算符中找到PermittingCAASubmission。但是里面没有 PermittingCAASubmission 所以添加 $parent 或 $root 可以解决你的问题。

 data-bind="value: $parent.PermittingCAASubmission"

请在您的问题中包含您的错误消息，我们可以在此之后说更多。

于 2012-10-08T17:38:58.337 回答
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>

这将使绑定更易于管理。

于 2012-10-08T18:32:04.043 回答