JSFiddle의 Dijit 대화 상자가 즉시 실행됩니다 - onClick이 아님

Question

재현 가능한 예제로 작동하도록 Dijit 대화 상자를 얻으려고 애 쓰고 있습니다. this JSfiddle에서 작업 코드를 가져 와서 예제를 통해 사용할 이름이 지정된 함수로 바꾸려고했습니다.

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 옵션을 선택했습니다. 무슨 일이 일어나고 있는지에 대한 다른 단서는 없습니다. 아이디어가 있으면 도움주세요.

Answer 1

는 문제의 몇 가지가 있습니다.

1) 다른 사람들이 지적한 것처럼, 함수를 사용하여 이벤트를 설정하지 않는 함수를 호출하고 있습니다. 따라서 대화 상자가 표시됩니다.

2) html이 구문 분석 될 때까지 기다려야합니다. . 또는 당신은 parser.parse() 여기

업데이트 된 피들러입니다 사용할 필요 :()`parser.parse를 사용하는 경우 http://jsfiddle.net/49y3rxzg/9/

Answer 2

()은 호출 연산자입니다. 함수를 직접 호출하고 함수의 반환 값을 이벤트 핸들러로 설정합니다. 이 기능을 다시 사용하려는 경우, 클로저를 사용

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); 
}); 

Answer 3

당신은 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(); 

    } 
})