i'm trying to bind an input element like this:
{{input value=email type="text" placeholder="Enter email" class=emailError:with-error}}
it works just fine, as long as I try to assign it only 1 class name ".with-error".
how can I assign 2 class names, so it will be: ".with-error .second-class"?
I know how to do it with:
{{bind-attr class=":secondClass emailError:with-error"}}
but this doesn't work with input helper.
Thanks!
This feature is not well documented, but when defining attributes on a Handlebars helper, you can either leave out the quotes to indicate that you want the value of the attribute to be a bound variable, or you can add the suffix "Binding" and then use quotes with an expression similar to the one you would use with {{bind-attr}}.
So, in your case, the following should work:
{{input value=email type="text" placeholder="Enter email" classBinding="emailError:with-error :myClassName"}}
Note how instead of class=myBoundValues we are using classBinding="myBoundValue".
Related
I know how to make an input in Ember using curly braces:
{{input type="text" value=userInput}}
How do I do this using Angle Brackets component syntax?
<Input #type="text" #value={{#parentVal}} />
or
<Input #type="text" #value={{this.localVal}} />
are the Angle Bracket equivalent to {{input type="text" value=userInput}}.
In versions early in 3.x series, you don't need the # or this in front of the value attribute. # means the argument comes from the parent context, like a parent component or controller, while this. refers to a property that belongs to that component itself.
Angle brackets syntax for inputs was proposed in RFC 459 and released in version 3.10. If you are trying to convert existing hbs to Angle Brackets, check out the syntax conversion guide and check for codemods.
I know there is a way in plain html to require the field have some kind of value. I believe it's 'input required'.
However, I'm not sure how to accomplish this in ember using handlebars. I've tried this but it was unsuccessful:
{{input required value=tax class="form-control" placeholder="State Tax"}}
Thanks in advance.
In ember input helpers you always have to give values to attributes. The shourtcuts like <input disabled required value="..."/> in html without value are not allowed in handlebars. Instead you have to write {{input disabled=true required=true value="..."/>
See ember twiddle with your example: https://ember-twiddle.com/b073b4551065e8884056de55fe0c9800?openFiles=templates.application.hbs%2C
I have a structure to invoke my component in this way, in a .hbs file
{{#myComponent as |section|}}
{{#if (eq section "section1")}}
this is the content for the first section <br>
{{else if (eq section "section2")}}
Some content for section two <br>
More content for second section <br>
{{/if}}
{{/myComponent}}
I want to be able to pass some parameters along, like this
{{#myComponent as |section| param1="xyz" param2=true}}
It is resulting in a parse error while build.
How can i still pass parameters to be accessed by the component in this scenario?
Thanks in advance!!
Figured that the entire component object has to be used, and then the "as" key word follows. Like this
{{#myComponent param1="xyz" param2=true as |section|}}
I have a simple SplitDateTime field:
meeting_datetime_start = forms.SplitDateTimeField(input_date_formats=["%a %d/%m/%Y"], input_time_formats=["%I:%M %p"])
This renders the following HTML:
<input id="id_meeting_datetime_start_0" name="meeting_datetime_start_0" type="text">
<input id="id_meeting_datetime_start_1" name="meeting_datetime_start_1" type="text">
I am using bootstrap, and want to add a custom template to render this HTML differently, such as:
<div class="col-xs-2">
<input id="id_meeting_datetime_start_0" name="meeting_datetime_start_0" type="text">
</div>
<div class="col-xs-3">
<input id="id_meeting_datetime_start_1" name="meeting_datetime_start_1" type="text">
</div>
How can I modify the basic Django template for the SplitDateTimeField?
You have some possible solutions.
1. Subclass SplitDateTimeWidget and redefine it's render method
By subclassing that widget you can inject into result code anything you want. After that just simply use your own widget with default SplitDateTimeField
2. Create inputs in template by hand
Possibly simplest solution, but most ugly in my opinion. Create code in template by hand, using proper variables for name, id, value etc. You must add _0, _1 suffixes and format existing value by hand.
3. Create template tag that will inject additional divs
You can create some template tag or filter that will do some text operations on default template to add additional divs.
I'm trying to set html-attributes in handlebars in an emberjs application.
<input type="{{field.type}}" name="{{field.key}}" id="{{field.name}}" />
is what I attempted.
It will outpup html like this:
<input type="<script id='metamorph-13-start' type='text/x-placeholder'></script>text<script id='metamorph-13-end' type='text/x-placeholder'></script>" name="<script id='metamorph-14-start' type='text/x-placeholder'></script>entry.810220554<script id='metamorph-14-end' type='text/x-placeholder'></script>" id="<script id='metamorph-15-start' type='text/x-placeholder'></script>firstname<script id='metamorph-15-end' type='text/x-placeholder'></script>">
All tags are wrapped in metamorph-tags. I expect this isn't what you are suppose to do. How can I add attributes based on my model.
Use bind-attr when you are binding to an element attribute
<input {{bind-attr type=field.type name=field.key id=field.name}} />