Lately I’ve been playing with Kendo UI Mobile to build iPhone apps. It’s similar to jQuery Mobile in that they are both HTML5/JavaScript based frameworks for buildings mobile apps.
The primary thing that drew me to investigate Kendo UI was its innate ability to adaptively render a native looking app based on detecting
the device it’s currently running on. In other words, it will render to look like a native iPhone app if it’s running on an iPhone and it will render to look like a native Droid app if it’s running on a Droid. This is in contrast to jQuery Mobile which looks
the same on all devices and, therefore, it can never quite look native for whatever device it’s running on. My first impressions of Kendo UI were
great. Using HTML5 data-* attributes to define “roles” for UI elements is easy,
the rendering looked
great, and
the basic navigation was simple and intuitive. However, I ran into major confusion when trying to figure out how to “correctly” build master-detail views. Since I was already very family with KnockoutJS, I set out to use that framework in conjunction with Kendo UI Mobile to build
the following simple scenario: I wanted to have a simple “Task Manager” application where my first screen just showed a list of tasks like this: Then clicking on a specific task would navigate to a detail screen that would show all details of
the specific task that was selected: Basic navigation between views in Kendo UI is simple.
The href of an <a> tag just needs to specify a hash tag followed by
the ID of
the view to navigate to as shown in this jsFiddle (notice
the href of
the <a> tag matches
the id of
the second view): Direct link to jsFiddle: here. That is all well and good but
the problem I encountered was: how to pass data between
the views? Specifically, I need
the detail view to display all
the details of whichever task was selected. If I was doing this with my typical technique with KnockoutJS, I know exactly what I would do. First I would create a view model that had my collection of tasks and a property for
the currently selected task like this: 1: function ViewModel() {
2: var self = this;
3: self.tasks = ko.observableArray(data);
4: self.selectedTask = ko.observable(null);
5: }
Then I would bind my list of tasks to
the unordered list - I would attach a “click” handler to each item (each <li> in
the unordered list) so that it would select
the “selectedTask” for
the view model.
The problem I found is this approach simply wouldn’t work for Kendo UI Mobile. It completely ignored
the click handlers that I was trying to attach to
the <a> tags – it just wanted to look at
the href (at least that’s what I observed). But if I can’t intercept this, then *how* can I pass data or any context to
the next view?
The only thing I was able to find in
the Kendo documentation is that you can pass query string arguments on
the view name you’re specifying in
the href. This enabled me to do
the following:
Specify
the task ID in each href – something like this: <a href=”#taskDetail?id=3></a>
Attach an “init method” (via
the “data-show” attribute on
the details view) that runs whenever
the view is activated
Inside this “init method”, grab
the task ID passed from
the query string to look up
the item from my view model’s list of tasks in order to set
the selected task
I was able to get all that working with about 20 lines of JavaScript as shown in this jsFiddle. If you click on
the Results tab, you can navigate between views and see
the the detail screen is correctly binding to
the selected item:
Direct link to jsFiddle: here.
With all that being done, I was very happy to get it working with
the behavior I wanted. However, I have no idea if that is
the “correct” way to do it or if there is a “better” way to do it. I know that Kendo UI comes with its own data binding framework but my preference is to be able to use (the well-documented) KnockoutJS since I’m already familiar with that framework rather than having to learn yet another new framework.
While I think my solution above is probably “acceptable”, there are still a couple of things that bug me about it. First, it seems odd that I have to loop through my items to *find* my selected item based on
the ID that was passed on
the query string - normally, with Knockout I can just refer directly to my selected item from where it was used. Second, it didn’t feel exactly right that I had to rely on
the “data-show” method of
the details view to set my context – normally with Knockout, I could just attach a click handler to
the <a> tag that was actually clicked by
the user in order to set
the “selected item.”
I’m not sure if I’m being too picky. I know there are many people that have *way* more expertise in Kendo UI compared to me – I’d be curious to know if there are better ways to achieve
the same results.
