Support for input add-ons is missing

[siovene]

Right now it's impossible to use input add-ons, which should render like this:

<div class="input-prepend">
    <span class="add-on">...</span>
    <input ...........>
</div>

or

<div class="input-append">
    <input ...........>
    <span class="add-on">...</span>
</div>

Please see: http://twitter.github.com/bootstrap/base-css.html#forms

I propose this syntax:

{{view Bootstrap.Forms.TextField valueBinding="obj.prop" append-addon="..."}}

so, the addition of append-addon and prepend-addon.

[dmathieu]

The ember naming convention would make it appendAddon.
I don't think the proposed solution really fits with emberjs. Anything can be set, from text to buttons.
So it'd require to be able to set a view as the add-on.

[siovene]

The reason why I was asking that it be set with the TextField, is that I cannot do something like this:

<div class="input-append">
  {{view Bootstrap.Forms.TextField valueBinding="price"}}
  <span class="add-on">$</span>
</div>

because ember-bootstrap will wrap the <input> tag with bootstrap markup, like control-group. So the add-on span will not work.

To make this work, the implementation must be somewhere in ember-bootstrap, mustn't it?

[bradleypriest]

@siovene I don't know if this would be used commonly enough to warrant adding the option.

I suggest creating a custom view in your app. Off the top of my head

javascript
Bootstrap.Forms.AppendedTextField = Bootstrap.Forms.Field.extend({
template: Ember.Handlebars.compile([
'{{view view.labelView viewName="labelView"}}',
'

',
'

',
' {{view view.inputField viewName="inputField"}}',
' {{view.appendAddon}}',
'

',
' {{view view.errorsView}}',
'

'].join("\n"))
});

Maybe worth documenting somewhere though

[siovene]

Thanks for the suggestion, I'll do that. Perhaps it's not common, but it would be nice if ember-bootstrap provided it.

[bradleypriest]

My main problem with ember-bootstrap providing it is that it would require every non-prepended input i.e. the vast majority of them to have to process whether or not they have the property. Maybe there's a better way to do it though.

[dmathieu]

I'm closing this as it won't be implemented as proposed.
If you want to propose an alternative, please create a discussion in our newly created google group.