jQuery and KnockoutJS in Win8? Sure, why not!

Apparently this is old news to some. Trendsetters...

With Windows 8 supporting HTML/JS (I refuse to call anything HTML5 these days - the words have lost all meaning to me, but that's another topic) applications, I was asked if jQuery is supported - with a goal to making JS applications more maintainable.

As I'd heard it mentioned at BUILD - and hadn't heard a major drama since people have been using the Developer Preview bits - I expected that it worked. However, to confirm this for myself, I found this forum thread on MSDN with a couple of caveats.

No fire and brimstone? Oh well, I'll just double-check...

After adding the jQuery file to the project, I modified the default.html file to include the jQuery file before the default.js file. The default.js file contains the bootstrapping code for the application:

   <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/jquery-1.6.4.js"></script>
    <script src="/js/default.js"></script>
</head>

And at the bottom of the default.js file, I use a simple selector to find a DOM element:

            // other code

            WinJS.UI.process($('#appbar')[0])
                .then(function () { 
                    $('#home').click(navigateHome);
                });

            WinJS.Navigation.navigate(homePage);

            var host = $('#contentHost');
        }
    }

    WinJS.Navigation.addEventListener('navigated', navigated);
    WinJS.Application.start();

})();

and started making use of selectors elsewhere instead of document.getElementById to make the code more concise...

And what of KnockoutJS?

I've only had basic experience with Knockout, but found an easier scenario to support. I dropped in the code and modified the detailPage template.

   <link rel="stylesheet" href="/css/default.css" />
    <link rel="stylesheet" href="/css/detailPage.css" />
    <script type="ms-deferred/javascript" src="/js/detailPage.js"></script>
    <script type="ms-deferred/javascript" src="/js/knockout-1.2.1.js"></script>
</head>

And then went to work making changes:

In detailPage.js

Before

function fragmentLoad(elements, options) {
    var item = options && options.item ? options.item : getItem();
    elements.querySelector('.pageTitle').textContent = item.group.title;

    WinJS.UI.processAll(elements)
        .then(function () {
            elements.querySelector('.title').textContent = item.title;
            elements.querySelector('.content').innerHTML = item.content;
        });
}

After

function fragmentLoad(elements, options) {
    var item = options && options.item ? options.item : getItem();
    WinJS.UI.processAll(elements).then(function () { ko.applyBindings(item); });
}

In detailPage.html - declared some bindings using the data-bind attribute

<div class="detailPage fragment">
    <header role="banner" aria-label="Header content">
        <button disabled class="win-backbutton" aria-label="Back"></button>
        <div class="titleArea">
            <h1 class="pageTitle win-title" data-bind="text: group.title"></h1>

        </div>
    </header>
    <section role="main" aria-label="Main content">
        <article>
            <div>
                <header>

                    <h1 class="title win-contentTitle" data-bind="text: title"></h1>
                </header>
                <div class="image" data-bind="style: { color: backgroundColor }"></div>
                <div class="content" data-bind="html: content"></div>
            </div>

        </article>
    </section>
</div>

So by moving the binding expressions to the UI (like the MVVM pattern that is popular with XAML application) we can lean on frameworks to make our Javascript code easier to maintain. Other components of the default templates have their own binding attributes - data-win-bind - which I'll explain later, but I find the KnockoutJS syntax more concise.

In particular the use of textContent instead of text to denote a text value? Why? Drop the 'Content' part unless there's a real good reason - it feels like ceremony.

I'll formulate some more opinions on the WinJS side as I delve deeper....