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.
