Page Transition between with JQuery Mobile and Knockout.js

Damir Dobric Posts

Next talks:



Follow me on Twitter: #ddobric




If you are fan of jQuery mobile and Knockout, you have probably noticed that page transition is a true issue. If you want to understand why,
you can try here and  here and many, many other. All very nice articles, which obviously explaining some peace of technology which MUST work.

To make this clear, take a look on following code:

"div[data-isclickable='true']").click(function (e) {



This peace of code will navigate to next page called ‘’activityDetailPage’ when some div tag is clicked.
If the code above is executed in the page which represents for example the list of items then activityDetailPage should represents the item details.
This is common navigation requirement.
Assuming that the detail page is bound to some object named ‘SelectedObject’ the HTML would look like:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">

                       <label for="ActivityId" class="ui-input-text">Activity ID:</label>
                       <input  data-mini="true" name="textarea" id="ActivityId" data-bind="value: ActivityId"/>

                       <label for="Status" class="ui-input-text">Status:</label>
                       <input readonly="readonly" data-mini="true" name="textarea" id="Status" data-bind="value: Status"/>

                       <label for="ProcessName" class="ui-input-text">ProcessName:</label>
                       <input readonly="readonly" data-mini="true" name="textarea" id="ProcessName" data-bind="value: ProcessName"/>


Unfortunately when you navigate to this page, the data will not be bound to HTML elements. This is because, the knockout binding has run before the user has clicked on item (div tag).
In every normal application framework this is something which just should work. .NET, Silverlight and WPF developers are mostly frustrated, because some elementary and trivial things just do not work.
jQuery Mobile might be nice and knockout too, but both together? Hmmm? If you don’t understand why somebody might be disappointed, because such things do not work then try to image what would happen when 1+1 sometime is 2 and sometimes 3.
in this century architects expect binding to work like ‘+’ operator. It just works.

So, here is the solution:

             $(document).bind('pagechange', function () {

                ko.applyBindings(yourModelInstamce.SelectedItem, document.getElementById("activityDetailPage"));


Posted Oct 01 2013, 07:41 PM by Damir Dobric
Filed under: , , is a .Net Community Blog powered by daenet GmbH.