Javascript doh Hello World，带有混合'；s内容窗格_Javascript_Dojo_Doh

Javascript doh Hello World，带有混合'；s内容窗格

javascript dojo

Javascript doh Hello World，带有混合'；s内容窗格,javascript,dojo,doh,Javascript,Dojo,Doh,我正在尝试运行一个示例doh测试用例。我正在测试一个从dijit/layout/ContentPane混合的模板化小部件没有抛出错误…组件根本不渲染。正在加载模板文件，因为我可以在firebug的net选项卡中看到它，但它好像没有“附加”到模板化小部件。当我删除ContentPane mixin时，一切正常我们的项目使用ContentPane在许多地方混合到我们的模板小部件中，因此我们可以将小部件视为布局小部件。该问题仅在尝试使用doh加载时发生我们正在尝试加载的小部件： defin

我正在尝试运行一个示例doh测试用例。我正在测试一个从dijit/layout/ContentPane混合的模板化小部件

没有抛出错误…组件根本不渲染。正在加载模板文件，因为我可以在firebug的net选项卡中看到它，但它好像没有“附加”到模板化小部件。当我删除ContentPane mixin时，一切正常

我们的项目使用ContentPane在许多地方混合到我们的模板小部件中，因此我们可以将小部件视为布局小部件。该问题仅在尝试使用doh加载时发生

我们正在尝试加载的小部件：

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

模板：

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

福

doh测试运行程序页面：

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


要求([
“dojo/ready”，
“dojo/parser”，
“dojo/dom样式”，
“dojo/query”，
“道场”，
“doh”
]，函数（ready，parser，domStyle，query，dojo，doh）{
就绪（函数（）{
parser.parse（）；
doh.寄存器（“t”[
功能设置（t）{
var d=新的doh.Deferred（）；
d、 回调（true）；
返回d；
}
]
);
doh.run（）；
});
});

模板html文件中的“foo”文本未显示

“因此，我们可以将我们的小部件视为布局小部件”

如果您只想获得布局功能，那么应该混合使用dijit/_LayoutWidget而不是dijit/layout/ContentPane

因此，您的小部件将成为：

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,

        // ...
    });
});

谢谢Philippe，我的测试正在进行中。当我们在应用程序中从ContentPane“扩展”时，它工作得很好，但与doh无关。我知道从现在起我应该扩展LayoutWidget，但是您是否碰巧知道为什么在应用程序中使用ContentPane会起作用，而在doh运行时不会起作用？这可能是因为您的模板不包含“data dojo attach point='containerNode'”节点。ContentPane需要一个。这就是通过窗格的“content”属性设置的内容。例如，在这个fiddle:中，如果从模板中删除containerNode，小部件将无法正确呈现。。。在dijit/_WidgetBase中，它说“必须为任何接受innerHTML的小部件（如ContentPane或BorderContainer，甚至Button）定义containerNode，反之，对于不接受innerHTML的小部件（如TextBox），containerNode为空。”是的，这似乎有效，可能是对原始问题的修复。这里最大的收获是使用LayoutWidget而不是ContentPane。