How do I correctly render jQuery Mobile Tab widget items using KnockoutJS?

Question

jsFiddle at http://jsfiddle.net/nAgfQ/2/ (See top of HTML section for explanation and workaround.)

Scenario

I'm using jQuery Mobile (1.4.2) and KnockoutJS (3.1.0) to build a very straightforward single-page tab-based web app for displaying data to business users.

Code

Here's the JS:

    $(function () {

    var Tab = function (Title, TabID) {

        var self = this;

        self.Title = ko.observable(Title);
        self.TabID = ko.observable(TabID);

        self.TabHref = ko.computed(function () {
            return '#' + self.TabID();
        });

    };

    function DashboardViewModel() {

        var self = this;

        self.Title = ko.observable();
        self.DashboardID = ko.observable();

        self.tabs = ko.observableArray([
        new Tab("Tab 1", "tabs-1", []),
        new Tab("Tab 2", "tabs-2", [])]);


        self.refreshTabs = function () {
            $('#tabs').tabs("refresh").tabs("option", "active", 0);
            //Added to callback to convert navbar div into jQuery Mobile Navbar
            $('#dashboard_navbar').navbar();

        };


    }

    dvm = new DashboardViewModel();
    ko.applyBindings(dvm);

});

Here's the body content of the page:

<body>
<div data-role="page" id="page-1">
    <div data-role="header">
            <h1>jQuery Mobile Tabs Test</h1>

    </div>
    <div data-role="content">
        <div data-role="tabs" id="tabs">
           <div data-role="navbar" id="dashboard_navbar">

                <ul data-bind="template { foreach : tabs  }">
                    <li><a data-bind="attr : { href: TabHref } , text: Title" data-ajax="false"></a>

                    </li>
                </ul>
            </div>
            <div data-bind=" template { foreach :tabs, afterRender: refreshTabs}">
                <div data-bind="attr : { id: TabID }" class="ui-body-d ui-content">
                    <h4 data-bind="text: Title" />
                </div>
            </div>
        </div>
    </div>

</div></body>

Issue

When you have a Tab widget in jQuery Mobile, you are encouraged to declare an element to have a data-role attribute set to "navbar."
When jQuery renders the page, it looks for the first ul child element of the selected element, and reads the number of li elements underneath that ul.
It then uses this to add a class with the naming schema ul-grid-N, where N is the letter of the alphabet corresponding to the number of elements found minus 1 (i.e. ul-grid-a for 2 elements, ul-grid-b for 3, etc.) If there is only one element, it uses a special class ul-grid-solo.

However, when you use KnockoutJS to load a set of bound tabs, you just supply a single li element as a template underneath a foreach binding. jQuery Mobile only sees the 1 element and so adds the ul-grid-solo class and then the navbar li elements end up being rendered as stacked on top of one another instead of horizontally aligned.

Workaround

The solution I have so far is to remove the "navbar" data-role and instead use KnockoutJS's afterRender callback to convert the element into a navbar once all the bound tabs have been inserted. (See the *refreshTab*s function in the DashboardViewModel object.)

This works, but is less than ideal since it forces the ViewModel to know something about the View which is an MVVM no-no.

Questions

Can I tell jQuery Mobile to hold off applying the grid class to the navbar until after the bindings have been applied? I poked around its API but didn't see anything particularly useful.
Is there something I can do with Knockout's custom bindings? Again, trying not to inject any DOM manipulation into the ViewModel.
In general, any other workarounds, comments on the code, etc. would be appreciated.

xdumaine xdumaine · Accepted Answer · 2014-03-12T18:53:53

Working with knockout and jQuery Mobile for a while, I can confirm that they simply do not play nice together. Our team has a list of re-usable knockout custom bindings just for working with jQuery mobile, because they're such a pain.

You could essentially wrap up the below workaround, or your own, into a custom binding that you'd use in place of foreach. Or subscribe to changes to the array of navbar items and update there.

Workaround based on your jsFiddle, trying to recreate the navbar, you have to also rip out the dynamic markup that jQuery mobile puts into the elements. Try adding this (source):

navbar.find("*").andSelf().each(function(){
    $(this).removeClass(function(i, cn){
         var matches = cn.match (/ui-[\w\-]+/g) || [];
             return (matches.join (' '));
         });
         if ($(this).attr("class") == "") {
             $(this).removeAttr("class");
         }
});

JSFiddle

How do I correctly render jQuery Mobile Tab widget items using KnockoutJS?

1 Answers