将单位添加到 dojo 中的 numberspinner答案

【问题标题】：add unit to numberspinner in dojo将单位添加到 dojo 中的 numberspinner
【发布时间】：2015-07-13 19:27:53
【问题描述】：

我正在以编程方式在 dojo 中创建一个带有 numberspinner 的表格容器。有没有办法在微调器中添加一个单位（秒、米等）？或者，如果这不可能，我怎样才能添加第二行，其中只有标签？所以我可以在那里定义单位。

【问题讨论】：

标签： dojo

【解决方案1】：

考虑创建一个自定义小部件，它将包含您的“标签”值，这里是一个示例。

注意：

如果您愿意，可以将 HTML 模板 templateString 从 label 更改为 div。下面我使用的是ContentPage()，但你可以使用一个布局组件。

require(['dijit/form/NumberSpinner', 'dijit/layout/ContentPane', 'dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(NumberSpinner, ContentPane, _WidgetBase, _TemplatedMixin, declare, domReady) {
     var data = {
        meters: '1'
    },
    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 NumberSpinner({
                id: this.textboxId,
                name: this.meters,
                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: 'meters: '
        }));
    }.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>

【讨论】：