knockoutjs jquery mobile checkbox list issue: cannot check

Question

With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/

I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.

Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/

Trevor Daniels · Accepted Answer · 2012-09-27 13:36:24Z

1

I solved this with two steps;

1) unwrapping the label from the input and hooking them together with 'for' attribute

    <input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
    <label data-bind="uniqueIDFor: true" >Click me</label>

    ko.bindingHandlers.uniqueIDFor = {
        init: function (element) {
            element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
        }
    };
    ko.bindingHandlers.uniqueID = {
        init: function (element) {
            element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
        }
    };

2) telling jqm to update the new content

    $('input:checkbox').trigger('create');

answered Sep 27, 2012 at 13:36

Trevor Daniels

1,2899 silver badges5 bronze badges

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

Comments

MarioG · Accepted Answer · 2012-06-05 21:59:06Z

0

I would change the model for this:

<!-- ko foreach: listItems-->
    <input type="checkbox" name="itemsList" value="name" />
    <span data-bind="text: name"></span>
<!-- /ko -->

the main thing to consider is the "value" property in the input control to render in the proper way.

Regards.

answered Jun 5, 2012 at 21:59

MarioG

251 silver badge10 bronze badges

Comments

aib · Accepted Answer · 2012-12-26 10:29:28Z

0

@tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/

answered Dec 26, 2012 at 10:29

aib

47.4k10 gold badges75 silver badges79 bronze badges

Collectives™ on Stack Overflow

knockoutjs jquery mobile checkbox list issue: cannot check

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related