如何在jquery $对话框中绑定淘汰简单网格？

Question

我有一个jquery $对话框，其中显示了一个文档。现在我的客户端也希望将用户会话历史记录显示到带分页的$ dialog中，所以我决定使用knockout simple grid但我面临绑定问题。任何人都可以帮忙吗？ 这是我的代码：

var url = "https://crocodoc.com/view/" + $(e).attr("viewUrl");
$dialog = $('<div></div>')
                       .html('<div style="position:relative; width:100%; height:100%;"><div style="top:-10px;"><a style="float:left;color:blue; margin-left: 680px; cursor:pointer;" onclick="ShareDoc()"><img src="../Images/share2.png" /></a><a id="btnDownload" href="' + $(e).attr("DocURL") + '" style="float:left;color:blue; margin-left: 0px;" ><img src="../Images/download.png" /></a><a style="float:right;" href="javascript:void(0)" onclick="CloseMe();"><img src="../Images/delete.png" alt="" width="15" height="15"></a></div>'
                       + '<iframe id="docFrame" style="border: 0px;margin-top:10px; " src="' + url + '" width="86%" height="95%"></iframe></div><div style="float:right; position:relative; margin-right: -13px; margin-top: -590px; border-color:red; border-style: solid; width:140px; height:590px;"><div class="BrowserHistory" style="border-color:green; border-style: solid; height:190px;"><h9 style="font-size:10px;">Your Browser History</h9><br/><div data-bind="dialog: {'simpleGrid: gridViewModel'}"></div></div><div class="CustomerViewed" style="border-color:yellow; border-style: solid; height:190px;"><h9 style="font-size:10px;">Customer also Viewed</h9></div><div class="Products" style="border-color:blue; border-style: solid; height:190px;"><h9 style="font-size:10px;">Products</h9></div></div>')
                       .dialog({
                           autoOpen: false,
                           modal: true,
                           height: 700,
                           width: 1000,
                           title: "Dialog"
                       });
$dialog.dialog('open');

我在$ dialog中使用自定义绑定：

ko.bindingHandlers.dialog = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
        setTimeout(function () {
            options.close = function () {
                allBindingsAccessor().dialogVisible(false);
            };

            $(element).dialog(options);
        }, 0);

        //handle disposal (not strictly necessary in this scenario)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).dialog("destroy");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
            $el = $(element),
            dialog = $el.data("uiDialog") || $el.data("dialog");

        //don't call open/close before initilization
        if (dialog) {
            $el.dialog(shouldBeOpen ? "open" : "close");
        }
    }
};