Javascript Dojo和绑定本机select与WidgetList_Javascript_Dojo

Javascript Dojo和绑定本机select与WidgetList

javascript dojo

Javascript Dojo和绑定本机select与WidgetList,javascript,dojo,Javascript,Dojo,我正试图用dojo构建一个数据绑定的本机选择列表，我不希望dojo小部件看起来像一个简单的选择，但是，我很难让它工作下面的代码“起作用”（它绑定数组中的三个元素），请注意，我已将选项包装在span标记中，这当然会使select为空。如果删除环绕选项的跨距，则该跨距无效你知道我如何做到这一点，也许是一种完全不同的方法代码：要求([ “dojo/parser”， “dojo/Stateful”， “dojox/mvc/StatefulArray”， “dojox/mvc/Output”，

我正试图用dojo构建一个数据绑定的本机选择列表，我不希望dojo小部件看起来像一个简单的选择，但是，我很难让它工作

下面的代码“起作用”（它绑定数组中的三个元素），请注意，我已将选项包装在span标记中，这当然会使select为空。如果删除环绕选项的跨距，则该跨距无效

你知道我如何做到这一点，也许是一种完全不同的方法

代码：


要求([
“dojo/parser”，
“dojo/Stateful”，
“dojox/mvc/StatefulArray”，
“dojox/mvc/Output”，
“dojo/domReady！”
]，函数（解析器、有状态、有状态数组）{
model=新的StatefulArray([{
姓名：“拉尔斯”，
数值：0
}, {
姓名：“每”，
价值：1
}, {
名称：“奥拉”，
价值：2
}]);
设置值=函数（值）{
警报（“运行”）；
此._设置（“内部文本”，值）；
};    
parser.parse（）；
});
at:“dojox/mvc/at”

有两个窍门：

基本上不能在模板的根节点中指定
```
数据dojo类型
```
/
```
数据dojo道具
```
。为了减轻这种限制，dojox/mvc/WidgetList具有
```
数据mvc子类型
```
/
```
数据mvc子道具
```
dojox/mvc/Output很有用，但通过dijit/_-WidgetBase的“节点映射”特性可以实现类似的功能

这里有一个

的例子。希望这有帮助

最好的，阿基拉

<!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/parser”，
“dojo/Stateful”，
“dojox/mvc/StatefulArray”，
“dojo/domReady！”
]，函数（解析器、有状态、有状态数组）{
model=新的StatefulArray([
{name:“Foo”}，
{name:“Bar”}，
{名称：“Baz”}
]);
parser.parse（）；
});
at:“dojox/mvc/at”

在我的小部件中尝试此功能时，效果不一样。我尝试使用数据dojo props=“children:this.layersStore”绑定，我在构造函数中初始化statefularray；this.layersStore=new StatefulArray（{…selectlist为空。我认为绑定不理解this.layersStore。或者是因为它是模板中的模板，并且模板已被解析？提示？Dojo接受“值持有者对象”一种观察值变化的方法，它需要API将变化通知观察者。简单的属性值分配不起作用。因此，您可能需要尝试

this.set（“layersStore”，…）

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