Question

我有一个类似的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绑定中的绑定不起作用。

请注意VM：

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

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

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

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

Answer 2

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

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

这将使绑定更容易管理。

敲除绑定在foreach绑定中打破

2 个答案: