Question

I am trying to write a custom widget (dialog) with dojo django templates. First, i made a simple template, which uses standard template syntax. It works fine. Then i tried to derail to django templates. Here is the template:

<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>

and code:

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

And i call this as so:

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

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

And when i try to instantiate widget prorammatically, i get the following error: You cannot use the Render object without specifying where you want to render it. Well, i looked through dojo sources and found this error string in dojox.dtl.render.dom. I occurs when object (my widget) does not have domNode set. I’ve placed breakpoint on dojox.dtl._DomTemplated.buildRendering() and saw that both domNode and srcNodeRef are undefined. I tried to add several mix-ins to my widget (see above), but none of them set these properties. Also i tried to set domNode in postCreate(), but then found in official docs, that postCreate() occurs after buildRendering(). I think that the issue is that i create my widget programmatically, but not on the top of existing DOM node.

So what am i doing wrong and how to make it work?

Answer 1

Seems like i need inheritance like this:

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)
        ....