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}} />
Related
I'm trying use input with datalist in a lightning component and doesn't seem to work. I've looked around and can't seem to find anything that says i can't. So basically,
<input list="acctlist"/>
<datalist id="acctlist">
<option value="somevalue">
</datalist>
does not work. I want to have an input in a form that a user can type but also able to select from a list returned from the controller. Is there a workaround that would be as simple or is this the following route the best i got.
https://developer.salesforce.com/blogs/developer-relations/2015/06/salesforce-lightning-inputlookup-missing-component.html
The list attribute of input tag is not compatible with lightning component.
When you deploy the components, the attribute is removed.
If you want to use input with datalist, you need to add the attribute in Renderer.js.
datalist.cmp
<input aura:id="acctlistInput" />
<datalist id="acctlist">
<option value="somevalue" />
</datalist>
datalistRenderer.js
afterRender : function(component, helper) {
var acctlistInputCmp = component.find("acctlistInput");
var acctlistInput = acctlistInputCmp.getElement();
acctlistInput.setAttribute("list", "acctlist");
return this.superAfterRender();
}
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 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".
I need to concat several variables to create one attribute, for an example I have a set of RadioButtons which may appear several times on the page - dynamically, first the view can be displayed severl time, other thing is that they are placed in each loop so they can appear several times per view.
So I can't use static name attribute, but I should concat if with several parts, for an exampe result should look like:
<input name="view1_row0" value="0"> No
<input name="view1_row0" value="1"> Yes
<!-- next row in view1 -->
<input name="view1_row1" value="0"> No
<input name="view1_row1" value="1"> Yes
<!-- next row in view2 -->
<input name="view2_row0" value="0"> No
<input name="view2_row0" value="1"> Yes
etc... I can easily get the parent's view's ID and/or index of the loop with view._parentView.contentIndex but I have no idea how to concat them in one binding, the pseudo code would look like this:
{{view Ember.RadioButton nameBinding=view.parentView.elementId + "_row" + view._parentView.contentIndex selectionBinding="someVal" value="0"}}
But it of course throws the error at + sign. Is there any way to resolve that ?
Why not pass them in as separate bindings and the concatenate them in a custom implementation of Ember.RadioButton?
{{view App.MyRadioButton elementIdBinding="view.parentView.elementId" contentIndexBinding="view._parentView.contentIndex" selectionBinding="someVal" value="0"}}
and then in App.MyRadioButton (which extends Ember.RadioButton)
name: function() {
return this.get('elementId') + '_row' + this.get('contentIndex');
}.property('elementId', 'contentIndex')
Alternatively you might also be able to do that in your controller.
I've got a Django form that is displaying a ClearableFileInput for a CloudinaryImage (from Cloudinary). Things are working great, except when I display the form field, I get a mangled href in the anchor element:
Currently: <cloudinary.CloudinaryImage object at 0x10b3f4ad0> <input type="checkbox" name="logo-clear" id="logo-clear_id" /> <label for="logo-clear_id">Clear</label><br />Change: <input id="id_logo" type="file" name="logo" class="span4" />
Here is the template code I am using:
<div class="fieldWrapper">
<label for="id_logo"><h3>{{ form.logo.label }}:</h3></label>
{{ form.logo|add_class:"span4" }}
<p>{{ form.logo.help_text }}</p>
</div>
The add_class part come from django-widget-tweaks. I've taken the add_class part out with no change in the output.
Here is my form definition:
class OrganizationFormTheme(forms.ModelForm):
pass
class Meta:
fields = ('logo',)
model = Organization
It looks like Django is having problems with the CloudinaryImage's url function. I suspect it is looking for a simple property rather than a function.
Any suggestions on how to handle this? Should I subclass CloudinaryImage and rewrite the url function somehow?
Indeed there was a conflict between the url function and the url property.
We've changed the function to be build_url instead of url.
In addition, you can specify transformation parameters as the url_options parameter when calling the constructor of CloudinaryImage. Then you can use the url property for getting the full Cloudinary URL.
The fix is available in the latest release of the Python library: http://pypi.python.org/pypi/cloudinary