2

私は JavaScript と Dojo が初めてで、別の URL に動的に移動するコードを記述しようとしています。これは JavaScript で簡単にできるようですが、dojo/on ではうまくいきません。これが私のコード例です。些細なコールバックは正常に機能します。dojo/on コールバックはコールバックを呼び出しますが、新しいページは表示されません。私のプロジェクトがそれを必要とするという理由だけで、これを動的に dojo で行う必要があります。これが失敗する理由と、それを機能させる方法を知っている人はいますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js">
</script>
<script type="text/javascript">
callback = function() {
    window.location.href = "about:blank";
    console.debug("callback invoked"); 
}
function init() {
    var node = dojo.byId("test");
    var childNode = dojo.create("a", { href : "" }, node);
    childNode.innerText = "dojo callback click here"; 
    require(["dojo/on"], function(on){
        on(childNode, "click", callback);
    }); 
}
dojo.ready(init);
</script>
<div id="test">
    <p>
    <a href = "javascript:callback()">trivial callback click here</a>
</div>
4

1 に答える 1

4

Dojo 1.7 以降、AMD ローダーは Dojo モジュールを使用するための推奨される方法です。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function(on, dom){
        on(dom.byId('theDiv'), 'click', function(){
            alert("Click!") // replace this line with location changes
        })
    })
    </script>
</head>
<body>
    <div id="test">
        <a href="javascript:void(0);" id="theDiv">Click Me</a>
    </div>
</body>
</html>

この例では、Dojo.js のコアが (要求どおりに) ロードされていますが、違いは、require メソッドを使用し、clickメソッドをdojo/ondiv にアタッチしていることです。理想的には、個別の JavaScript ファイルを使用してページの動作を指示しますが、この例では、js をインデックス ページに埋め込むだけで十分です。

パーサーを使用すると、宣言型を使用できます<script type="dojo/on" data-dojo-event="click">...</script>が、さまざまな理由から、最大限の効率を得るためにプログラムによる解析と JavaScript ファイルを使用する必要があります。

さらに、グローバル スコープで関数/メソッド/変数を定義します。

<script type="text/javascript">
callback = function() {
    window.location.href = "about:blank";
    console.debug("callback invoked"); 
}
</script>

... は推奨されません。より良い代替手段があります。

于 2013-03-12T06:12:18.970 に答える