CODEWITHSUNDEEP
jquery-mobileknockout.js
lei
lei

Reputation: 31

knockoutjs jquery mobile checkbox list issue: cannot check

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/

Upvotes: 0

Views: 1258

Answers (3)

aib
aib

Reputation: 46981

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

Upvotes: 0

Trevor Daniels
Trevor Daniels

Reputation: 1239

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');

Upvotes: 1

MarioG
MarioG

Reputation: 25

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.

Upvotes: 0

Related Questions