CODEWITHSUNDEEP
javascriptdojo
Lars Anundskås
Lars Anundskås

Reputation: 1355

Dojo and binding native select with WidgetList

I'm trying to build a data-bound native select list with dojo, I don't want the dojo widget-look, just plain select, however, I'm struggling to get it working

The following code "works" (it binds the three elements in the array), notice that I have wrapped the options in span tags, which of course will render the select empty. If I remove the span wrapping the options, it's not working.

Any idea how I can achieve this, maybe a totally different approach?

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/dojo-release-1.9.3/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, async: 1"></script>
    <script type="text/javascript">
        require([
            "dojo/parser",
            "dojo/Stateful",
            "dojox/mvc/StatefulArray",
            "dojox/mvc/Output",
            "dojo/domReady!"
        ], function (parser, Stateful, StatefulArray) {
            model =  new StatefulArray([{
                    Name: "Lars",
                    Value: 0
                    }, {
                    Name: "Per",
                    Value: 1
                    }, {
                    Name: "Ola",
                    Value: 2
                    }]);

            setValue = function (value) {
                alert("running");
                this._set("innerText", value);
            };    
            parser.parse();    
        });
    </script>
</head>
<body>
<script type="dojo/require">at: "dojox/mvc/at"</script>        
<select data-dojo-type="dojox/mvc/WidgetList"
        data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
        data-dojo-props="children: model">                
    <script type="dojox/mvc/InlineTemplate">
        <span>
            <option data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(this.target, 'Name'), _setValueAttr: setValue"></option>
        </span>
    </script>
</select>
</body>
</html>

Upvotes: 0

Views: 397

Answers (1)

asudoh
asudoh

Reputation: 614

there are two tricks:

  • You cannot basically specify data-dojo-type/data-dojo-props in the root node of the template. To alleviate such limitation, dojox/mvc/WidgetList has data-mvc-child-type/data-mvc-child-props.
  • dojox/mvc/Output is useful, but you can achieve a similar thing by dijit/_WidgetBase's "node mapping" feature.

Here's an example of <select>/<option> thing. Hope this helps.

Best, - Akira

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, async: 1"></script>
        <script type="text/javascript">
            require([
                "dojo/parser",
                "dojo/Stateful",
                "dojox/mvc/StatefulArray",
                "dojo/domReady!"
            ], function (parser, Stateful, StatefulArray) {
                model = new StatefulArray([
                    {name: "Foo"},
                    {name: "Bar"},
                    {name: "Baz"}
                ]);

                parser.parse();    
            });
        </script>
    </head>
    <body>
        <script type="dojo/require">at: "dojox/mvc/at"</script>        
        <select data-dojo-type="dojox/mvc/WidgetList"
                data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
                data-dojo-props="children: model"
                data-mvc-child-props="_setTextAttr: {node: 'domNode', type: 'innerText'}, text: at(this.target, 'name')">                
            <script type="dojox/mvc/InlineTemplate">
               <option></option>
            </script>
        </select>
    </body>
</html>

Upvotes: 1

Related Questions