JSFiddle中的Dijit對話框立即啓動 - 而不是onClick

我很努力讓Dijit對話框爲可重現的示例工作。我從this JSfiddle中獲取了工作代碼，並試圖將其轉換爲在整個示例中使用的命名函數。JSFiddle中的Dijit對話框立即啓動 - 而不是onClick

作者使用：

new Button({label: 'Show dialog', onClick: function() { 
    //Create dialog programmatically here 
} 
});

，但我已經改變了這是稍有不同：

function launchSelectDialog(selectOptions) { 
    //Create dialog programmatically here 
} 
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));

Here is my version.不幸的是，這只是立即啓動對話框在加載頁面，永不再當點擊按鈕時。

我檢查了JSFiddle中的NoWrap選項。我沒有其他線索知道發生了什麼。如果您有任何想法請幫助。

來源

2016-08-30 Tsaari

有幾個問題。

1）像其他人一樣指出，你正在調用函數沒有設置事件的功能。因此該對話框是可見的onload。

2）您需要等到html解析完成。或者你需要使用parser.parse()

這裏是更新的小提琴手：http://jsfiddle.net/49y3rxzg/9/

來源

2016-08-30 21:01:04

在使用'parser.parse（）的情況下，'我會用parser.parse（它）建議使用則（）; – GibboK

非常感謝！這解釋了一切。 – Tsaari

()是調用運算符。您正在自己調用該函數，並將該函數的返回值設置爲事件處理函數。如果你想重複使用的功能，使用閉包：

function launchSelectDialog(selectOptions) { 
    // the returned function will be used as the event handler 
    return function() { 
     // the passed `selectOptions` is remembered in this context 
    } 
}

另一種選擇是：

registry.byId("default-launch", "onClick", function() { 
    launchSelectDialog(allOpts); 
});

來源

2016-08-30 20:37:47 undefined

您需要registry.byId()檢索之前啓動您的按鈕組件。在你的代碼中實際上registry.byId("default-launch")正在返回undefined;

另外registry.byId()功能只接受id，所以額外的參數將被忽略。

要解決它，你應該正確地啓動一個Button實例，並內onClick聲明launchSelectDialog(allOpts)，如：

var myButton = new Button({ 
    label: "Default Options", 
    onClick: function() { 
     launchSelectDialog(allOpts); 
    } 
    }, "default-launch");

下面固定的版本爲你的腳本。

http://jsfiddle.net/usm829jq/

require([ 
    "dojo/dom", 
    "dijit/Dialog", 
    "dijit/form/Button", 
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", 
    "dijit/registry", 
    "dojo/domReady!" 
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) { 

    var allOpts = [{ 
    label: "Foo", 
    value: "foo" 
    }, { 
    label: "Bar", 
    value: "bar" 
    }] 

    var myButton = new Button({ 
    label: "Default Options", 
    onClick: function() { 
     launchSelectDialog(allOpts); 
    } 
    }, "default-launch"); 


    function launchSelectDialog(SelectOptions) { 
    var layout = new BorderContainer({ 
     design: "headline", 
     style: "width: 400px; height: 400px; background-color: yellow;" 
    }); 

    var centerPane = new ContentPane({ 
     region: "center", 
     style: "background-color: green;", 
     content: "center" 
    }); 

    var actionPane = new ContentPane({ 
     region: "bottom", 
     style: "background-color: blue;" 
    }); 

    (new Button({ 
     label: "OK" 
    })).placeAt(actionPane.containerNode); 
    (new Button({ 
     label: "Cancel" 
    })).placeAt(actionPane.containerNode); 

    layout.addChild(centerPane); 
    layout.addChild(actionPane); 
    layout.startup(); 

    var dialog = new DijitDialog({ 
     title: 'dialog title', 
     style: { 
     //width: '400px', 
     //height: '400px', 
     }, 
     content: layout 
    }); 

    dialog.containerNode.style.backgroundColor = "red"; 
    dialog.startup(); 
    dialog.show(); 

    } 
})

來源

2016-08-30 20:41:28 GibboK

JSFiddle中的Dijit對話框立即啓動 - 而不是onClick

回答

相關問題