Knockout Dialog

by joshrivers

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.1.1.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>
<div id="mytabs" data-bind="dialogs: dialogs">
</div>

<input type="button" data-bind="click: launch1" value="launch1">
<script id='dialogLandingZone' type='text/x-jquery-tmpl'>
    <div id="fid" data-bind="template: {name: templateId, data: templateData},dialog: options" style="display:none"></div>
</script>


<script id='firstDialog' type='text/x-jquery-tmpl'>
<div data-bind="">${name}</div>
</script>

JavaScript

model = {};
model.dialogs = ko.observableArray([]);
model.launch1 = function() {model.dialogs.push(
    {
        templateId: "firstDialog",
        templateData: { name: "Bob" },
        options: {title: "My Dialog"}
    }
)};
ko.bindingHandlers.dialogs = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var newValueAccessor = function() {
            return {foreach: valueAccessor(),
                    name: "dialogLandingZone"
                   };
                                          };
        ko.bindingHandlers.template.update(element, newValueAccessor, allBindingsAccessor, viewModel);
    }
};
ko.bindingHandlers.dialog = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        window.console.log(element);
        setTimeout(function(){ $(element).dialog(valueAccessor());},1);
    }
};
ko.applyBindings(model);