10

次のような dojo タグの id と data-dojo-id の違いは何ですか?

<button id="save" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-event="onClick:save">Save</button>

このボタンを参照してラベルを変更しようとしました: var myButton = dijit.byId("save"); ボタンのラベルを変更できるように myButton.set("label", "Add New");

id="save" を使用すると機能します。data-dojo-id="save" のみを使用すると機能しません。

私は Dojo を初めて使用するので、説明やチュートリアルを教えていただければ幸いです。

4

1 に答える 1

13

data-dojo-idウィジェットをグローバル名前空間、つまりwindowオブジェクトに割り当てます。

<button data-dojo-id="save" data-dojo-type="dijit/form/Button">Save</button>​

ボタンに直接アクセスできます。

save.set("label", "Add New");

jsFiddle でアクションの違いを参照してください: http://jsfiddle.net/phusick/7yV56/

編集：あなたの質問に答えるために。全く使いませんdata-dojo-id。これは、AMD とは正反対のグローバル名前空間を汚染します。widgets.saveとにかく、次のようなものを使用widgets.renameして、汚染を最小限に抑えることができます。

<button data-dojo-id="widgets.save" data-dojo-type="dijit/form/Button">Save</button>​
<button data-dojo-id="widgets.rename" data-dojo-type="dijit/form/Button">Rename</button>​

IMOは、本格的なアプリケーションではなく、プログレッシブエンハンスメントdata-dojo-idのために存在します。

data-dojo-idインスタンスを変数に割り当てるだけなので、同じ dijit を持つ複数の dijit を使用するとdata-dojo-id、変数は最後に割り当てられたものを指します (つまり、配列にはなりません)。

registry.byId必要に応じてウィジェットを取得するためにメソッドを大量に使用することを避けることができます。開始する最良の方法はdijit/registy.findWidgets(rootNode, skipNode). dojo/parser.parse(rootNode, options)また、インスタンス化されたオブジェクトの配列、またはより正確には以下を返すことに注意してください。

インスタンス化されたオブジェクトの配列である混合オブジェクトを返しますが、インスタンス化されたオブジェクトで解決される promise を含めることもできます。これは下位互換性のために行われます。パーサーがモジュールを自動要求する場合、それは常に promise の方法で動作し、 parser.parse().then(function(instances){...})使用する必要があります。

widgetsオブジェクトであるプロパティにContentPane の dijit を割り当てるために使用するメソッドの例:

_attachTemplateWidgets: function(widgets) {
    widgets = widgets || this.getChildren();
    for(var each = 0; each < widgets.length; each++) {
        var widget = widgets[each];
        var attachPoint = widget.params.dojoAttachPoint;
        if(attachPoint) {
            this.widget[attachPoint] = widget;
        }

        var children = widget.getChildren();
        if(children.length > 0) {
           this._attachTemplateWidgets(children);
        }
    }
}

クラス全体をここに置きます: https://gist.github.com/3754324。app.ui._Paneの代わりにこれを使用しますdijit/layout/ContentPane。

于 2012-09-18T05:05:23.960 に答える