Knockout and JQuery Mobile

I found that Jquery mobile stuff does not work once it is inside of knockout.

In the following html, “Test Text” cannot be shown even when one clicks on the + to expand.

It is probably better to switch from jquery mobile to bootstrap since bootstrap is pure CSS.  In this case, I think knockout and jquery mobile are interfering with each other, probably in UI behaviors implemented in javascript.

 

<table>
<tbody data-bind="with: chosenHearingSummary">
<tr>
<td>
<div data-role="collapsible">
<h3>Internal</h3>
Test Text
</div>
</td>
</tr>
</tbody>
</table>
Solution:
 
HTML:
<table>
<tbody data-bind="with: someEntity">
<tr>
<td>
<div data-role="collapsible" data-bind="click: $parent.toggleInternal">
<h3>Internal Section</h3>
</div>
<div class="internalSection" data-bind="visible: $parent.expandedInternal">
<label data-bind="text: ID"></label>
<label data-bind="text: InternalID"></label>
</div>
</td>
</tr>
</tbody>
</table>
 

View Model:

var viewModel = function () {
var self = this;
self.expandedInternal = ko.observable(true);

self.toggleInternal = function () {
console.log('toggleInternal called');
self.expandedInternal(!self.expandedInternal());
};
}
 
Reference:
 
 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s