我正在尝试使用 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/