jquery ui dialog + knockoutjs

Having a problem getting the dialog to show; dialog retains 'display: none' property despite call to 'open'

by gene

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div style="width: 100%">
    <div  class="ui-widget-header">SORT BY
        <span data-bind="foreach: sortFields, radioset: {}">
        <input type="radio" data-bind="attr: {id: id, name: id}, checked: selected, click: $parent.sortSelected" />
        <label data-bind="attr: {for: id}, text: label()"></label>
        </span>
    </div>
</div>    

Selected: <span data-bind="text: sortSelected"></span>

JavaScript

var SortField = function(id, label, order, active) {
    this.id = ko.observable(id);
    this.label = ko.observable(label);
    this.order = ko.observable(order);
    
    this.selected = ko.observable(active);
    
    this.toString = function() {"Sorted by " + this.label() + " " + this.order() }
}
    
    
ko.bindingHandlers.radioset = {
    init: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        $(element).buttonset(options);
    }
}

function getArrowIcon(sortOrder) {
    return sortOrder == 'asc' ?
            'ui-icon-arrowthick-1-n' : 'ui-icon-arrowthick-1-s';
}
ko.bindingHandlers.sort = {
        init: function(element, valueAccessor, allBindingsAccessor, sortField) {
            var sortParams = ko.utils.unwrapObservable(valueAccessor());

            var $button = $(element);
            $button
                .button({
                    label: sortParams.label(),
                    icons: {primary: '', secondary: getArrowIcon(sortParams.order())}})
        },
        update: function(element, valueAccessor, allBindingsAccessor, sortField) {
            var sortParams = ko.utils.unwrapObservable(valueAccessor());

            $(element).button("option", "icons", {primary: '', secondary: getArrowIcon(sortParams.order())});
        }
}

function viewModel() {
    this.sortFields = ko.observableArray([
        new SortField("s1", "Time", "desc", true),
        new SortField("s2", "Price", "asc", false),
        new SortField("s3", "Category", "asc", false)
    ]);
    
    this.sortSelected = ko.observable();
};

ko.applyBindings(new viewModel());