Question

I have a block of code which is supposed to loop over an observable array, and generate a series of grouped checkboxes (as in this example ).

Here’s what I’m getting instead. http://dl.dropbox.com/u/495070/shared/2012-03-28_09.03.33.000.png

here’s a jsFiddle that demonstrates the issue.

And here’s the (not as useful as the fiddle) code snippet that generates it.

            <fieldset id="myList" data-role="controlgroup"  data-bind='foreach : acRoleOps()'>
                <legend>
                </legend>
                <br><br><br><h4><span data-bind="text: $root.opNameGet(OperationID)"></span></h4>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bcreate-' + ID, name: 'checkbox-bcreate-' + ID, id: 'checkbox-bcreate-' + ID }, checked: BCreate, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bcreate-' + ID }">Create</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bread-' + ID, name: 'checkbox-bread-' + ID, id: 'checkbox-bread-' + ID }, checked: BRead, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bread-' + ID }">Read</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bedit-' + ID, name: 'checkbox-bedit-' + ID, id: 'checkbox-bedit-' + ID }, checked: BEdit, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bedit-' + ID }">Edit</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bdelete-' + ID, name: 'checkbox-bdelete-' + ID, id: 'checkbox-bdelete-' + ID }, checked: BDelete, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bdelete-' + ID }">Delete</label>

            </fieldset>

Has anyone seen this before? If so, can you point out where I went wrong?

Thanks!

Answer 1

You need to use the knockout <!-- ko foreach: myItems -->
http://knockoutjs.com/documentation/foreach-binding.html

http://jsfiddle.net/vNcNC/38/