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>

この理由は、常にそこにある 2 つのタブがあり、追加されているかどうかに応じて他のタブを追加するためです。

問題は上記ではなく、タブの内容です。その部分は上記のように見えますが、たくさんあるので、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(),
}

問題に関係のないものは省いたことに注意してください。

4

2 に答える 2

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 に答える
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 を使用した後、上記の binding を調べてみましょう。値バインディングは、演算子の 1 つの内部でPermittingCAASubmissionを見つけることを期待しています。ただし、その中に PermittingCAASubmission がないため、 $parent または $root を追加すると問題を解決できます。

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

質問にエラー メッセージを含めてください。その後、詳細をお知らせします。

于 2012-10-08T17:38:58.337 に答える