javascript - 如何将 input-group-addon ( Bootstrap CSS ) 添加到 Alpaca.js 字段

Question

希望得到一些帮助，我需要一个附加和前置的输入组插件 As shown here on bootstrap.com转换为 alpaca.js 表单。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group"><span class="input-group-addon">$</span>
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

模板( Handlebars )应类似于下面的代码片段，但是网站上的文档不包含这样的自定义选项和模板编辑。

 <script type="text/x-handlebars-template">

 	{{#if options.component}}
 	<div class="input-group">
 		{{#if options.prepend}}
 		<span class="input-group-addon" id="basic-addon-prepend">{{options.prepend}}</span>
 		{{/if}}
	{{/if}}

 		<input type="{{inputType}}" id="{{id}}" {{#if options.placeholder}}placeholder="{{options.placeholder}}"{{/if}} {{#if options.size}}size="{{options.size}}"{{/if}} {{#if options.readonly}}readonly="readonly"{{/if}} {{#if name}}name="{{name}}"{{/if}} {{#each options.data}}data-{{@key}}="{{this}}"{{/each}} {{#each options.attributes}}{{@key}}="{{this}}"{{/each}}/>

 	{{#if options.component}}
 		{{#if options.append}}
 		<span class="input-group-addon" id="basic-addon-append">{{options.append}}</span>
 		{{/if}}
 	</div>
 	{{/if}}
 	
 </script>

问题是:这段代码应该在哪里修改，修改后的模板应该如何执行？

提前致谢!

Answer 1

如果您尝试对字段使用自定义模板，您应该将其设置为 View 对象，如下所示:

"view": {
    "fields": {
        "/username": {
            "templates": {
                "control-text": "#input-group-addon-template"
            }
        }
    }
}

这是一个工作 fiddle为了这。如果这不是您想要的，请向我提供更多详细信息，我很乐意提供帮助:)