javascript - Dojo 并使用 WidgetList 绑定(bind) native 选择

标签 javascript dojo

我正在尝试使用 dojo 构建一个数据绑定(bind)的 native 选择列表,我不想要 dojo 小部件外观,只是简单的选择,但是,我正在努力让它工作

以下代码“有效”(它绑定(bind)了数组中的三个元素),请注意,我已将选项包装在 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>

最佳答案

有两个技巧:

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

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

最好,-阿基拉

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

关于javascript - Dojo 并使用 WidgetList 绑定(bind) native 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26265114/

相关文章:

php - 调用 "onclick"函数并加载 url

javascript - 如何使用 jasmine 对 jquery ajax 调用进行单元测试?

javascript - 2500 次请求后 Google map 出现 OVER_QUERY_LIMIT 错误

javascript - 结合diji/layout理解dojo的require

javascript - 合并 Javascript 变量

JavaScript undefined variable

javascript - HTML5 - Web SQL 数据库文件存储和所有表的创建位置

javascript - 在 dojo 中切换 div 的可见性

javascript - 从小部件获取表单父级

css - 在 Internet Explorer 中使用样式的 Dojo TabContainer