如何动态地在“ ValidationTextBox”之前添加“ HTML标签”？ [英] How to add a `HTML label` before a `ValidationTextBox` dynamically?

问题描述

我需要在每个 ValidationTextBox 之前动态添加 HTML标签。

$ b根据对象 data 中存在的属性数，分别创建$ b

ValidationTextBox 和HTML标签。 p>

我需要一个示例来说明如何操作。

示例：
http://jsfiddle.net/F2qAN/97/#run

  dojo.require（ dijit.form.ValidationTextBox）; 
 dojo.require（ dijit.layout.ContentPane）; 
 
函数build（）{
 var data = {
名称： a，
姓： b，
年龄： c 
}，
validationTextBox，
 layout = new dijit.layout.ContentPane（{}）; 
 Object.keys（data）.forEach（function（prop，index）{
validationTextBox = new dijit.form.ValidationTextBox（{
 id：prop +'-'+ index，
名称：prop，
值：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>）; 
 layout.addChild（validationTextBox）; 
 layout.addChild（label）; 
  

解决方案

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

  require（['dijit / form / ValidationTextBox'，'dijit / layout / ContentPane'，'dijit / _WidgetBase'，'dijit / _TemplatedMixin'，'dojo / _base / declare'，'dojo / domReady！']，函数（ValidationTextBox，ContentPane，_WidgetBase，_TemplatedMixin，declaration，domReady）{var data = {名称：'a'，姓氏：'b'，年龄：'c'}，布局=新的ContentPane（），LabelTextbox =声明（[_WidgetBase，_TemplatedMixin]，{label：``，textboxId：''，name：''，value：''，templateString：'< div< label> $ {label}< / label>< div data-dojo-attach-point = textboxNode>< / div>< / div>'，postCreate：function（）{this .inherited（参数）; 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>  

I need to add dynamically HTML labels before each ValidationTextBox.

ValidationTextBox and HTML label are created accordingly to the number of property present for object data.

I would need an example on how to do it.

Example: 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);

I am trying using dojo/dom-construct but with no result, ex:

        var label = domConstruct.toDom("<label for="male">label</label>");
        layout.addChild(validationTextBox);
        layout.addChild(label );

解决方案

Using a home made widget is the proper approach for that.

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>

这篇关于如何动态地在“ ValidationTextBox”之前添加“ HTML标签”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！