Question

我使用knockout和typescript打开基于条件的对话框。 if语句有效，但对话框没有使用下面的代码切换。任何帮助将不胜感激。

TypeScript：

class SearchMTRModel {
    mtrWarnElement: JQuery;
    allowDuplicates : KnockoutObservable<boolean>;
 }

初始化功能：

var model = new SearchMTRModel();

$(() => {
ko.applyBindings(model);
search();

model.mtrWarnElement = $('#mtrWarnDialog').dialog({
            autoOpen: false,
            modal: true,
            title: 'Duplicate MTR detected.',
            buttons: {
                'Cancel': () => {
                    model.allowDuplicates = ko.observable(false);
                    model.mtrWarnElement.dialog('close');

                },
                'Confirm': () => {
                    var heats = new MTRHeat();
                    model.allowDuplicates = ko.observable(true);
                    addPDFToPackage(heats);
                    model.mtrWarnElement.dialog('close');
                }
            },
        close: () => {
            model.allowDuplicates(false);
            model.allowDuplicates = ko.observable(false);
            model.mtrWarnElement.dialog('close');
            }
    });
});

应该打开对话框的函数：

export function addPDFToPackage(heat: MTRHeat): void {


    var koHeat: MTRHeatWithInclude = ko.mapping.fromJS(heat);
    koHeat.Include = ko.observable(true);

    var mtrID = koHeat.MTR.MTRID();

    var mtrIDs = [];

    var addToHeats = () => model.mtrPackage.Heats.push(koHeat);

    var arrayOfHeats = model.mtrPackage.Heats();
    for (var i = 0; i < arrayOfHeats.length; i++) {
        mtrIDs.push(arrayOfHeats[i].MTRID());
    }
    var idx = mtrIDs.indexOf(mtrID);

    if (idx >= 0) {

       //the code gets here but dialog doesn't open.

       model.mtrWarnElement.dialog('open');
    } 
    else if (idx === -1 || model.allowDuplicates()) {
       addHeatToPackage(model.mtrPackage.PackageID(), heat.HeatID).done(addToHeats);
        } 
    }
}

HTML

<div id="mtrWarnDialog" data-bind="dialog: { autoOpen: false, modal: true}">

</div>

Answer 1

列出的代码非常不清楚，因为应该打开jQuery对话框的代码似乎是由对话框中的confirm-button触发的。除此之外，您似乎还在HTML代码中有一个对话框BindingHandler，此处未列出。

我过去使用过的方法如下：

在组件ViewModel上添加一个属性，指示是否应显示该对话框

public showModal: KnockoutObservable<boolean> = ko.observable(false);

为jQuery Modal对话框添加BindingHandler。 stackoverflow上有很多examples个。确保注册BindingHandler，否则它将无效。

ko.bindingHandlers.modal = ...

在模板中，将公共属性从ViewModel传递给BindingHandler，如：

<div data-bind="dialog: { dialogVisible: showModal }"></div>

最后，将ViewModel上的属性设置为true / false，模式应该打开/关闭。

this.showModal(true);

使用typescript / knockout的JQuery对话框无法打开

1 个答案: