Multiple foreach in knockout 2 level array

Question

Essentially I have the following 2 dimensional array:

"items": 
[
    ["",""],
    ["",""],
    ["",""]
]

I want to iterate over this collection using knockout and I got the following:

        <!-- ko foreach: items -->
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
            <!-- /ko -->

However, this does not appear to be working. Any ideas?

Thanks in advance

G

You'll need to update your question to include how you are applying your knockout bindings. Best to create a fiddle so you can replicate your issue. — beauXjames
– beauXjames, Commented Feb 4, 2014 at 18:13

Michael Best · Accepted Answer · 2014-02-04 23:43:08Z

4

Virtual bindings are just comments and sometimes can get moved around by the browser as it tries to correct the HTML markup. In this case, the browser surrounds your <tr> tag with a <tbody> tag as required by the HTML spec. The <tbody> starts right before the <tr> tag and ends right before the closing </table> tag. Thus the virtual element closing comment is now in the wrong place:

<table>
    <!-- ko foreach: items -->
    <tbody>
        <tr>
            ...
        </tr>
        <!-- /ko -->
    </tbody>
</table>

The key to fixing this is to add the <tbody> tag to your markup:

<table>
    <tbody>
        <!-- ko foreach: items -->
        <tr>
            ...
        </tr>
        <!-- /ko -->
    </tbody>
</table>

Reference: http://www.whatwg.org/specs/web-apps/current-work/multipage/tree-construction.html#parsing-main-intable

edited Feb 4, 2014 at 23:43

answered Feb 4, 2014 at 23:32

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony Chu · Accepted Answer · 2014-02-04 19:33:17Z

You've run into an edge case where Knockout isn't able to find the second  tag when it's inside of a <table>.

The following markup causes an error (in Chrome it's saying Uncaught Error: Cannot find closing comment tag to match: ko foreach: items):

<table>
<!-- ko foreach: items -->
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
<!-- /ko -->
</table>

Fiddle: http://jsfiddle.net/63rkQ/

But if you change the outer foreach to be on the <table> tag, it works:

<table data-bind="foreach: items">
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
</table>

Fiddle: http://jsfiddle.net/63rkQ/1/

Try not to use virtual elements for your bindings unless you absolutely have to. I've run into strange cases where they work on some browsers but not others. They're difficult to debug.

You can see that moving the virtual element outside of the <table> also works (at least in Chrome) but I don't think that's what you wanted)...

Fiddle: http://jsfiddle.net/63rkQ/2/

Collectives™ on Stack Overflow

Multiple foreach in knockout 2 level array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related