jQuery-Mobile checkboxes dynamically added through Knockout can't be checked

2
votes

I try to add checkboxes to my page by using Knockout. But those dynamically added checkboxes can't be checked by clicking on them. If I add a box using jQuery, the generated HTML differs from a Knockout checkbox. The input gets wrapped in another <div class="ui-checkbox">. Also there is no difference if the custom binding checkbox is not used. Has someone an idea how to solve this problem?

  • jQuery: 1.10.2
  • jQuery-Mobile: 1.3.2
  • Knockout: 2.3.0

Here is a fiddle: http://jsfiddle.net/USpX5/

HTML: 

<div id="fiddle" data-bind="foreach: boxes">
    <label>
        <input type="checkbox" />
        <span data-bind="text: name"></span>
    </label>
</div>

JS: 

var BoxModel = function(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
};

var MainModel = function()
{
    this.boxes = ko.observableArray([]);
}
var main = new MainModel();

$('#add-ko').click(function() {
    var i = $('#fiddle').find('input[type=checkbox]').length + 1;
    main.boxes.push(new BoxModel('id'+i, 'name'+i));
});
$('#add-jqm').click(function() {
    var i = $('#fiddle').find('input[type=checkbox]').length + 1;
    $('#fiddle').append('<label><input type="checkbox" /><span>name'+i+'</span></label>').trigger('create');
});

// http://stackoverflow.com/a/15841271/2710739
ko.bindingHandlers.checkbox = {
    init: function(element, valueAccessor) {    
        // set the dom element to a checkbox and initialize it (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio();
        checkbox.attr('type', 'checkbox');
    },
    update: function(element, valueAccessor) {
        // update the checked binding, i.e., check or uncheck the checkbox
        ko.bindingHandlers.checked.update(element, valueAccessor);

        // and refresh the element (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio('refresh');
    }
};

ko.applyBindings(main);

Resulting HTML (copied from Chrome DevTools):

<div id="fiddle" data-bind="foreach: boxes">

    <!-- added with ko -->
    <div class="ui-checkbox">
        <label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="false" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c">
            <span class="ui-btn-inner">
                <span class="ui-btn-text">
                    <span data-bind="text: name">name1</span>
                </span>
                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
            </span>
        </label>
        <div class="ui-checkbox"><!-- additional ui-checkbox class maybe causes the problem -->
            <input type="checkbox" data-bind="checkbox:true">
        </div>
    </div>

    <!-- added with jqm -->
    <div class="ui-checkbox">
        <label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="false" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c">
            <span class="ui-btn-inner">
                <span class="ui-btn-text">
                    <span>name2</span>
                </span>
                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
            </span>
        </label>
        <input type="checkbox">
    </div>
</div>
2
jquery-mobileknockout.jscheckbox
For starters you have a couple of syntax issues that I cleaned up in there. They may have not been breaking anything but they weren't helping. I don't quite understand what jQuery mobile is trying to do with the second checkbox besides possibly having a hidden one to represent the fake element jQuery mobile is creating, either way I haven't used it enough to help further but maybe someone can use this to help answer the question jsfiddle.net/USpX5/1 - PW Kad
when you add jqm checkbox and then add knockout it breaks the structure of previous added jqm ones. I'm not a knockout expert, but it seems to be a common problem. I found many posts with no definite answer. - Omar
I found a solution and added it as an answer. - r15ch13

2 Answers

2
votes

Here is an updated fiddle for Knockout v3: http://jsfiddle.net/USpX5/12/

The main tweak was in the update method of the binding.

update: function(element, valueAccessor) {       
    if (ko.bindingHandlers.checked.update) {
         ko.bindingHandlers.checked.update(element, valueAccessor);
    }
    else 
    {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).prop( "checked", value);
    }

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh');
}
1
votes

I looked into the jQuery Mobile Demos again and found data-role="none". It prevents JQM from auto-enhancing an element. Now I can add checkboxes and let the BindingHandler enhance them through checkbox.checkboxradio() afterwards.

Now the checkbox looks like this: 

<button data-bind="click: add">Add checkbox</button>

<!-- show checked boxes -->
Checked: 
<div id="checkedBoxes" data-bind="foreach: boxes">
    <span data-bind="text: name, if: checked"></span>
</div>
<hr>

<!-- checkboxes -->
<div id="newBoxes" data-bind="foreach: boxes">
    <label>
        <input type="checkbox" data-bind="checkbox: checked" data-role="none" />
        <span data-bind="text: name"></span>
    </label>
</div>

And in the BindingHandlers init method, checkbox.removeAttr('data-role') is used to let JQM enhance the element via checkbox.checkboxradio():

ko.bindingHandlers.checkbox = {
    init: function(element, valueAccessor) {    
        // set the dom element to a checkbox and initialize it (for jquerymobile)
        var checkbox = $(element);
        // let jquerymobile enhance the element
        checkbox.removeAttr('data-role');
        // make it so
        checkbox.checkboxradio();
        // register change event to update the model on changes to the dom
        checkbox.on('change', function(e) {
            valueAccessor()(this.checked);
        });
    },
    update: function(element, valueAccessor) {
        // update the checked binding, i.e., check or uncheck the checkbox
        ko.bindingHandlers.checked.update(element, valueAccessor);

        // and refresh the element (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio('refresh');
    }
};

var BoxModel = function(id, name, checked) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);

    // checkbox state
    self.checked = ko.observable(checked);    
};

function MainViewModel()
{
    var self = this;
    // hold all added checkboxes
    self.boxes = ko.observableArray([]);

    // add new checkbox
    self.add = function () {
        var i = $('#newBoxes').find('input[type=checkbox]').length + 1;
        self.boxes.push(new BoxModel('id'+i, 'name'+i, false));
    }
}

ko.applyBindings(new MainViewModel());

Here is an updated fiddle: http://jsfiddle.net/USpX5/5/