使用Dojo TabContainer和Dojox.mvc

时间:2014-03-11 01:24:17

标签: dojo

我正在尝试使用dijit / layout / TabContainer和dojox / mvc / Repeat。似乎由于单独的选项卡窗格(contentPanes)不是选项卡容器的直接子项,因此它不会将它们呈现为选项卡。我最终得到了三个内容窗格,但没有标签。

我创建了一个显示问题的粘贴箱。我已经包含了一个文本框,它绑定到有状态模型,以显示转发器的范围是正确的。

http://jsbin.com/tufuzini/1/edit?html,output

有没有人经历过这种情况或有其他选择?

1 个答案:

答案 0 :(得分:1)

dojox/mvc/Repeat是一个已弃用的模块,因为它已被dojox/mvc/WidgetList接管。它允许您将多次出现的模板窗口小部件作为另一个窗口小部件的直接子窗口,例如dijit/layout/TabContainer。这是一个例子:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, async: 1"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/resources/dojo.css">
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
        <script>
            require([
                "dojo/_base/declare",
                "dojo/aspect",
                "dojo/parser",
                "dojox/mvc/getStateful",
                "dojox/mvc/Templated",
                "dojox/mvc/WidgetList",
                "dijit/layout/TabContainer",
                "dojox/mvc/Element",
                "dojo/domReady!"
            ], function(declare, aspect, parser, getStateful, Templated, WidgetList){
                tabRecords = getStateful({
                    items: [
                        {first: "Anne", last: "Ackerman"},
                        {first: "Ben", last: "Beckham"},
                        {first: "Chad", last: "Chapman"}
                    ]
                });
                declare("my.Templated", Templated, {
                    templateString: document.getElementById("innerTemplate").innerHTML
                });
                parser.parse();
            });
        </script>
        <script id="innerTemplate" type="dojox/mvc/InlineTemplate">
            <div>
                <div>First: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'first')"></div>
                <div>Last: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'last')"></div>
            </div>
        </script>
    </head>
    <body class="claro">
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div data-dojo-type="dijit/layout/TabContainer"
            data-dojo-mixins="dojox/mvc/WidgetList"
            data-dojo-props="partialRebuild: 1, children: at(tabRecords, 'items')"
            data-mvc-child-type="my.Templated"
            data-mvc-child-props="title: at(this.target, 'first')">
        </div>
    </body>
</html>

最佳,