Using Dojo TabContainer With Dojox.mvc

我试图使用dijit/layout/TabContainer与dojox/mvc/Repeat。看起来，由于单个选项卡窗格(contentPanes)不是选项卡容器的直接子代，因此不会将它们呈现为选项卡。我最终得到了三个内容窗格，但是没有选项卡。

我已经创建了一个显示问题的粘贴箱。我已经包含了一个绑定到有状态模型的文本框，以显示中继器上的作用域是正确的。

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

输出

有人经历过或有其他选择吗?

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>

彰

相关内容

最新更新

热门标签：