如何在Alpaca.js字段上添加输入组附加组件（Bootstrap CSS）

Question

Hoping for some assistance , I require an appended and prepended Input group addon As shown here on bootstrap.com into a alpaca.js form.

 <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> 

The template (handlebars) should look like the snippet below, however documentation on the site does not cover custom options and template editing like this.

  <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> 

The question would be : Where should this code be changed ,and how should the modified template be executed ?

Thanks in advance!

Answer 1

If you're tring to use a custom template for a field you should set it into view object like this :

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

Here's a working fiddle for this. If this isn't what you're looking for please fill me with more details and I'll be glad to help :)