[英]How to add a `HTML label` before a `ValidationTextBox` dynamically?
我需要在每个ValidationTextBox
之前动态添加HTML labels
。
ValidationTextBox
和HTML标签是根据对象data
存在的属性数量而创建的。
我需要一个如何做的例子。
示例: http : //jsfiddle.net/F2qAN/97/#run
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.layout.ContentPane");
function build() {
var data = {
name: 'a',
surname: 'b',
age: 'c'
},
validationTextBox,
layout = new dijit.layout.ContentPane({});
Object.keys(data).forEach(function (prop, index) {
validationTextBox = new dijit.form.ValidationTextBox({
id: prop + '-'+ index,
name: prop,
value: data[prop]
});
layout.addChild(validationTextBox);
}.bind(this))
layout.placeAt('layout');
layout.startup();
}
dojo.addOnLoad(build);
我正在尝试使用dojo/dom-construct
但没有结果,例如:
var label = domConstruct.toDom("<label for="male">label</label>");
layout.addChild(validationTextBox);
layout.addChild(label );
使用自制的小部件是正确的方法。
require(['dijit/form/ValidationTextBox', 'dijit/layout/ContentPane', 'dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(ValidationTextBox, ContentPane, _WidgetBase, _TemplatedMixin, declare, domReady) { var data = { name: 'a', surname: 'b', age: 'c' }, layout = new ContentPane(), LabelTextbox = declare([_WidgetBase, _TemplatedMixin], { label: '', textboxId: '', name: '', value: '', templateString: '<div><label>${label}</label><div data-dojo-attach-point="textboxNode"></div></div>', postCreate: function() { this.inherited(arguments); this.own(new ValidationTextBox({ id: this.textboxId, name: this.name, value: this.value }, this.textboxNode)); } }); Object.keys(data).forEach(function (prop, index) { layout.addChild(new LabelTextbox({ textboxId: prop + '-'+ index, name: prop, value: data[prop], label: 'foo' })); }.bind(this)); layout.placeAt('layout'); layout.startup(); });
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> <div id="layout"></div>
我找到了使用dojo.place()的解决方案。
仍然有兴趣了解是否有其他方法可以达到相同的结果。
http://jsfiddle.net/F2qAN/101/
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo");
function build() {
var data = {
name: 'a',
surname: 'b',
age: 'c'
},
validationTextBox,
layout = new dijit.layout.ContentPane({});
Object.keys(data).forEach(function (prop, index) {
validationTextBox = new dijit.form.ValidationTextBox({
id: prop + '-'+ index,
name: prop,
value: data[prop]
});
dojo.place("<label>MY LABEL</label>", layout.containerNode);
layout.addChild(validationTextBox);
}.bind(this))
layout.placeAt('layout');
layout.startup();
}
dojo.addOnLoad(build);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.