JQM issue Knockout - jquery-mobile

Question

I'm trying to buid a moible Web Application with JQM and Knockout.
After my Knockout script is working i tried to get some style in it.
<form action="" data-bind=" template:{ 'if': loginVM, data: loginVM }">
//Some Code
</form>
<form action="" data-bind="template: { 'if': startVM, data: startVM }">
//Some Code
</form>
This is my more or less my Knockout script
var masterViewModel = {
loginVM: ko.observable(),
startVM: ko.observable(),
projektUnterbrechen: ko.observable(),
logout: ko.observable(),
projectStartVM: ko.observable()
};
var LoginVM = function () {
var self = this;
self.showDetails = function () {
if ((self.user() == "Gregor") && (self.password() == "gregrech")) {
masterViewModel.loginVM(null);
masterViewModel.startVM(new StartVM());
}
};
var StartVM = function () {
//Some Code
};
now after adding
<script src="../../Scripts/jquery.mobile-1.2.0.js" type="text/javascript"></script>
to my project my knockout doesn't work anymore.
It seems like my masterViewModel is not updatet!
For example i tried this:
var LoginVM = function () {
var self = this;
self.showDetails = function () {
if ((self.user() == "Gregor") && (self.password() == "gregrech")) {
masterViewModel.loginVM(null);
masterViewModel.startVM(new StartVM());
alert(masterViewModel.startVM()==null) //Messagebox displays "false"
}
};
var StartVM = function () {
alert(masterViewModel.startVM()==null) //Messagebox displays "true"
};
what could be a soloutin for this starnge problem?

Answer 1

JQM will alter the DOM once it is initialised, rendering many of the default ko bindings useless. Custom bindings can be written to work around these issues. It is hard to tell what the actual problem is here but that should give you something to read up on.
This is a useful article to start with: http://www.scottlogic.co.uk/blog/colin/2012/10/integrating-knockout-and-jquerymobile/