Using Dojo TabContainer With Dojox.mvc

Question

I am trying to use dijit/layout/TabContainer with dojox/mvc/Repeat. It seems that as the indivdual tab panes (contentPanes) are not immediate children of the tab container it does not render them as tabs. I end up with three content panes but no tabs.

I have created a paste bin which shows the issue. I have included a text box which binds to the stateful model to show that the scope is correct on the repeater.

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

Has anyone experienced this or have an alternative?

asudoh asudoh · Accepted Answer · 2014-03-12T09:09:43

dojox/mvc/Repeat is a deprecated module as it has been take over by dojox/mvc/WidgetList. It'll allow you to place multiple occurrence of a template widget as immediate child of another widget, for example, dijit/layout/TabContainer. Here's an example:

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

Best,

Akira

Using Dojo TabContainer With Dojox.mvc

1 Answers