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) { $.mobile.changePage("#activityDetailPage"); }); |
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"/> </div> |
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