1

dojo djangoテンプレートを使用してカスタムウィジェット(ダイアログ)を作成しようとしています。まず、標準のテンプレート構文を使用する単純なテンプレートを作成しました。正常に動作します。それから私はdjangoテンプレートに脱線しようとしました。テンプレートは次のとおりです。

<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title">
    <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
        <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span> 
        <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1">
            <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}">x</span>
        </span>
    </div>
    <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent bugViewContent">
            <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
                <div data-dojo-type="dijit.layout.ContentPane" title="Details" selected="true">
                    <span>{{ttt}}</span>
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" title="Attachments">
                    Test
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" title="Core tab">
                    Test
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" title="Corporate tab">
                    Test
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" title="Distribution tab">
                    Test
                </div>
            </div>
    </div>
</div>

およびコード:

require([
         "dojo/_base/declare",
         "dojo/ready",
         "dijit/_Widget",
         "dijit/Dialog",
         "dijit/_TemplatedMixin",
         "dojox/dtl/_DomTemplated",
         "dijit/_WidgetsInTemplateMixin",
         "dojo/text!qc_boobster/BugView.html",
         "dijit/layout/TabContainer",
         "dijit/layout/ContentPane"
        ], 
        function(declare, ready, Widget, Dialog, TemplatedMinxin, DtlDomTemplated, WidgetsInTemplateMixin, template) {
            declare("qc_boobster.BugView", 
                    [Widget, Dialog, TemplatedMinxin, DtlDomTemplated, WidgetsInTemplateMixin],
                    {
                        templateString : template,

                        ttt : "test",

                        setBug : function(aBug) {
                            console.log("BugView.setBug(");
                            console.log(aBug);
                            console.log(")");
                        },
                    });

            ready(function() {
            });
        }
);

そして、私はこれをそのように呼びます:

xhr.get({
    url : "ajax/bugs/" + id,
    handleAs : "json",
    load : function(data) {
        var bugView = new qc_boobster.BugView();

        bugView.setBug(data);
        bugView.show();
    }
});

また、ウィジェットをプロラマティックにインスタンス化しようとすると、次のエラーが発生しますYou cannot use the Render object without specifying where you want to render it。さて、私はdojoソースを調べて、このエラー文字列をで見つけましたdojox.dtl.render.dom。オブジェクト(私のウィジェット)にdomNodeが設定されていない場合に発生します。ブレークポイントを設定しdojox.dtl._DomTemplated.buildRendering()、両方domNodesrcNodeRefが未定義であることを確認しました。ウィジェットにいくつかのミックスインを追加しようとしましたが(上記を参照)、これらのプロパティを設定するものはありませんでした。domNodeまた、で設定しようとしpostCreate()ましたが、公式ドキュメントで見つかりました。これはのpostCreate()後に発生しbuildRendering()ます。問題は、ウィジェットをプログラムで作成することですが、既存のDOMノードの上には作成しないことだと思います。

それで、私は何を間違っているのですか、そしてそれを機能させる方法は?

4

1 に答える 1

1

私はこのような継承が必要なようです:

require([
     "dojo/_base/declare",
     "dojo/ready",
     "dijit/Dialog",
     "dojox/dtl/_Templated",
     "dijit/_WidgetsInTemplateMixin",
     "dojo/text!qc_boobster/BugView.html",
    ], 
    function(declare, ready, Dialog, DtlTemplated, WidgetsInTemplateMixin, template)
        ....
于 2012-04-19T21:11:17.500 に答える