Question

我正在尝试使用dojo构建数据绑定的本机选择列表，我不希望dojo小部件看起来，只是简单的选择，但是，我正在努力让它工作

以下代码“有效”（它绑定数组中的三个元素），请注意我已将选项包装在span标记中，这当然会将选择为空。如果我删除包装选项的跨度，它就无法正常工作。

任何想法如何实现这一点，也许是一种完全不同的方法？

代码：

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

Answer 1

有两个技巧：

您基本上不能在模板的根节点中指定data-dojo-type / data-dojo-props。为了减轻这种限制，dojox / mvc / WidgetList有data-mvc-child-type / data-mvc-child-props。
dojox / mvc / Output非常有用，但您可以通过dijit / _WidgetBase的“节点映射”功能实现类似的功能。

以下是<select> / <option>事件的示例。希望这会有所帮助。

最好， - 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>

Dojo和使用WidgetList绑定本机选择

1 个答案: