javascript - 如何在`ValidationTextBox`之前动态添加`HTML标签`？

Question

我需要HTML labels在每个ValidationTextBox.

ValidationTextBox和 HTML 标签是根据 object 存在的属性数量创建的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 );

Answer 1

使用自制小部件是正确的方法。

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>

Answer 2

我找到了使用 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);