doh Hello World with templated widget that mixin's ContentPane

Question

I am trying to get a sample doh test case running. I am testing a templated widget that mixins from dijit/layout/ContentPane.

No error is being thrown...the component simply doesn't render. The template file is being loaded because I can see it in the net tab of firebug, but it's like it's not being "attached" to the templated widget. When I remove the ContentPane mixin, things work as expected.

Our project uses ContentPane to mixin to our templated widgets in many places so we can treat our widget as a layout widget. The problem only occurs when trying to load it with the doh.

The widget we're trying to load:

define([
    'dijit/layout/ContentPane',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./about.html'
    ], function(ContentPane, WidgetsInTemplateMixin, TemplatedMixin, WidgetBase, declare, about) {
    return declare([ContentPane, TemplatedMixin, WidgetsInTemplateMixin], {
        templateString: about,

        constructor: function() {
            this.inherited(arguments);
        },

        startup: function() {
            this.inherited(arguments);
        }
    });
});

The template:

<div>
    <div>
        <h1>foo</h1>
    </div>
</div>

The doh test runner page:

<body class="claro">
    <div style="height: 100%">
    <div id="mainContainer"
         style="height: 100%; width: 100%"
         data-dojo-type="dijit/layout/BorderContainer">
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'center'">
            <div data-dojo-type="testPackage/widgets/About/About"
                 style="width: 100px; height: 100px; background-color: green">
            </div>
        </div>
    </div>
    </div>

    <script type="text/javascript">
        require([
            'dojo/ready',
            'dojo/parser',
            'dojo/dom-style',
            'dojo/query',
            'dojo',
            'doh'
        ], function(ready, parser, domStyle, query, dojo, doh){
            ready(function() {
                parser.parse();

                doh.register("t", [
                        function setup(t){
                            var d = new doh.Deferred();

                            d.callback(true);
                            return d;
                        }
                    ]
                );
                doh.run();
            });
        });
    </script>
</body>

The "foo" text in the template html file is not shown

score 2 · Accepted Answer · answered Jul 12 '13 at 14:10

2

"so we can treat our widget as a layout widget"...

You should mixin dijit/_LayoutWidget instead of dijit/layout/ContentPane if all you want to get is the layout functionality.

So, your widget would become :

define([
     'dijit/layout/_LayoutWidget',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_TemplatedMixin',
    'dojo/_base/declare',
    'dojo/text!./about.html',
    'dojo/domReady!'
], function(ContentPane, _WidgetsInTemplateMixin, _TemplatedMixin, declare, about) {
    return declare([_LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: about,

        // ...
    });
});

answered Jul 12 '13 at 14:10

Philippe

6,703
3
30
50

Thanks Philippe, my test is working now. When we "extend" from ContentPane in our application it works just fine, but not with doh. I understand that from now on I should extend from LayoutWidget, but do you by chance know why using ContentPane would work in the application, and not in when run by doh? – Jonathan.Brink Jul 13 '13 at 12:37
1

It might be because your template doesn't include a "data-dojo-attach-point='containerNode'" node. ContentPane expects one. That's where the contents set through the "content" property of the pane go. For example, in this fiddle : http://jsfiddle.net/psoares/5mRKE/, if you remove the containerNode from the template, the widget won't render properly... In dijit/_WidgetBase, it's said "containerNode must be defined for any widget that accepts innerHTML (like ContentPane or BorderContainer or even Button), and conversely is null for widgets that don't, like TextBox." – Philippe Jul 15 '13 at 15:06
Yes, this seems to work and could have been a fix to the original problem. The biggest takeaway here is to use _LayoutWidget rather than ContentPane. – Jonathan.Brink Jul 16 '13 at 19:02

doh Hello World with templated widget that mixin's ContentPane

1 Answers1