CODEWITHSUNDEEP
jquery-mobileknockout.js
reidLinden
reidLinden

Reputation: 4170

knockout+jqm weird checkbox issue

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!

Upvotes: 2

Views: 957

Answers (3)

Imran Qadir Baksh - Baloch
Imran Qadir Baksh - Baloch

Reputation: 34034

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

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

Upvotes: 1

madcapnmckay
madcapnmckay

Reputation: 15984

I think this is a conflict between the time KO is generating your markup and the time jquery mobile is applying its custom skinning. I found one issue with your code. I think the foreach is on the wrong element. I wrapped your fieldset in a new div and applied the foreach to that.

<div data-bind='foreach : acRoleOps()'>
                <fieldset id="opsList" data-role="controlgroup">

I'm not too familiar with jquery mobile but here's how I proved that this is the case. I removed the references and just checked that KO generated the correct markup. With the above change it appears to do so.

http://jsfiddle.net/madcapnmckay/THG9F/

Here is the jquery mobile only version with the generated markup pasted in.

http://jsfiddle.net/madcapnmckay/tuWgM/1/

As you can see KO is generating the correct markup, there is just a timing conflict.

Hope this helps.

Upvotes: 0

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

document.ready() doesn't work on jQuery mobile because pages are dynamically loaded. Instead, use the pageInit event. See here: http://jsfiddle.net/vNcNC/17/ Now you've still got some issues with Knockout, but I'm not too familiar with it so I can't help with those.

Upvotes: 0

Related Questions