jquery mobile and knockout form submit binding

Question

I stumbled on an apparent incompatibility between knockoutjs and jquery mobile when it comes to form submit behavior.

Consider the following markup:

Answer 1

The best solution I have been able to find is the following custom ko binding:

//This binding fixes apparent incompatibility between knockout and jqm
ko.bindingHandlers.jqmsubmit = {
  init: function (el, accessor, allbindings, vm) {
    ko.bindingHandlers.submit.init(el, accessor, allbindings, vm);
    $(el).submit(function (e) {
        // prevent the submit behavior
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
  }
};

To be used in the place of the standard submit ko binding:

<form data-bind="jqmsubmit: myKoSubmitAction">
  <!-- form fields here -->
</form>

Answer 2

You can also add data-ajax="false" to the <form> element.

See Submitting Forms.