数字路径错误

Question

我对 Dijit 类有疑问，他们只是不想工作。我的代码没有在按钮周围创建 table 并且这个按钮并不像它应该的那样可爱。可能与路径有关，但我不确定。我收到此错误："Undefined attribute value (dijit/layout/TabContainer)." 按钮附近。我的文件与 dojo、dijit、dojox 在同一个文件夹中。

它应该是这样的： http://i.stack.imgur.com/HcKuJ.png

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true"></script>

    <script type="text/javascript">
        require([
            "dijit/form/Button",
            "dijit/layout/TabContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(Button, TabContainer, ContentPane){
            var tc = new TabContainer({
                    style: {
                        height: "200px",
                        width: "400px"
                    },
                    id: "tc"
                }),
                atab = new ContentPane({
                    title: "A Tab",
                    closable: false,
                    id: "atab"
                }),
                myButton = new Button({
                    label: "Click Me!",
                    id: "myButton"
                });
            atab.addChild(myButton);
            tc.addChild(atab);
            tc.startup();
        });
</script>
</head>
<body class="claro">

    <div id="tc" data-dojo-type="dijit/layout/TabContainer"
            data-dojo-props="style: { height: '200px', width: '400px' }">
        <div id="atab" data-dojo-type="dojo/dijit/layout/ContentPane"
                data-dojo-props="title: 'A Tab', closable: false">
            <button type="button" id="myButton"
                    data-dojo-type="dijit/form/Button">
                <span>Click Me!</span>
            </button>
        </div>
    </div>
</body>
</html>

Answer 1

您提供的示例使用两种不同的方式向页面添加 dijit，但实际上并没有遵循其中任何一种方式。

Dijit 有两种实例化小部件的机制：编程式和声明式。要使用编程方法，请创建小部件并使用 JavaScript 将它们添加到页面。小部件正在示例的 require 回调中创建，但它们从未添加到页面中。要添加它们，请在 tc.startup(); 之前使用 tc.placeAt(document.body); 调用将选项卡容器放置在文档中。（placeAt 将接受任何 DOM 节点或节点 ID。）

要使用声明性方法，请创建 DOM 结构并用小部件类型标记它，然后告诉 Dojo 的解析器解析 DOM。该示例设置了 DOM 结构，但从未指示 Dojo 解析它，因此永远不会创建 dijits。要完成声明式方法，您可以执行以下两项操作之一：

1) 完全删除JS代码并在data-dojo-config属性中添加parseOnLoad:true 属性。

<script src="dojo/dojo.js" data-dojo-config="async: true; parseOnLoad: true"></script>`

2) 加载'dojo/parser'并在require回调中调用parser.parse()。

require([ 'dojo/parser', 'dojo/domReady!' ], function (parser) {
    parser.parse();
});

在任何情况下，只应使用一种添加小部件的方法——编程或声明——但不能同时使用这两种方法。

数字路径错误

Dijit path error

javascript

html

dojo

dijit.form