使用命名函數對dijit菜單項進行onclick

Question

我在為dijit菜單項調用onClick函數時遇到問題。 我不斷得到該函數未定義：

這是菜單項的代碼：

...
<div data-dojo-type="dijit/DropDownMenu" id="fileMenu">
            <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){SetPage('test');}">Watershed</div>
        </div>

這是我要調用的函數：

function SetPage(pg){
alert(pg);
}

我必須在代碼中注冊onclick事件嗎？

謝謝

Answer 1

這是由於范圍而引起的問題，因為setpage不在菜單的onclick函數的范圍內，您可以像下面這樣直接調用alert函數：

<div data-dojo-type="dijit/DropDownMenu" id="fileMenu"> <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('test';}">Watershed</div> </div>

或者您可以在此處附加事件處理程序：

<div data-dojo-type="dijit/DropDownMenu" id="fileMenu"> <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:_onClick">Watershed</div> </div>

並在您的javascript文件中

_onClick:function(evt){this.SetPage(evt);}, SetPage:function(evt){ alert(evt.target.innerHTML);}

Answer 2

這聽起來像是一個范圍界定問題。 即使命名了函數，它也應該在全局范圍內可用，以使其能夠與聲明性代碼一起使用。

例如，如果將該函數放在require()塊中，則該函數將不起作用，因為它的作用域僅限於該函數（僅從內部可見）。

例如：

require(["dijit/MenuItem", "dijit/DropDownMenu", "dojo/parser"], function() {
  function SetPage(pg) {
    alert(pg);
  };

  SetPage("test"); // This will work because it's in the same scope
});

SetPage("test"); // This will not work

下部的SetPage()調用具有另一個作用域，因此看不到該函數。 要解決此問題，必須在全局范圍（Web應用程序的window ）上定義功能。

可能的解決方案是：

require(["dijit/DropDownMenu", "dijit/MenuItem", "dojo/parser"], function() {
  window.SetPage = function(pg) {
    alert(pg);  
  }; 
});

這將起作用，因為您將其添加到了window對象。 您可以在JSFiddle上看到一個示例。