CODEWITHSUNDEEP
javascripthtmlknockout.js
Armand
Armand

Reputation: 10254

Knockout bindings breaking in foreach binding

I have a foreach binding that looks like:

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

The reason for this is there is two tabs that will always be there and I add other tabs depending if it has been added or not.

The problem is not with the above but with the tab content, that part looks similar to the above it is just a lot so decided to show 1 complete part at lease.

I then have (the broken part)

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

My issue is that the bindings within the bindings of the foreach is not working.

Please note the VM:

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

Please note I omitted stuff that was not relevant to the problem.

Upvotes: 0

Views: 1120

Answers (2)

gbs
gbs

Reputation: 3529

I would advise to not mix fixed content with templated content, possibly using virtual elements, as shown here below:

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

This will make bindings easier to manage.

Upvotes: 1

Luffy
Luffy

Reputation: 2337

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

Lets examine above binding , after using foreach your value bindings expect to find PermittingCAASubmission inside one of the operators. But there is no PermittingCAASubmission inside it so adding $parent or $root can resolve your issue.

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

Please include your error message to your question , we can say more about after that.

Upvotes: 1

Related Questions