Wednesday, 21 August 2013

Ember: how to set classNameBindings on parent element of view

Ember: how to set classNameBindings on parent element of view

See http://jsfiddle.net/4ZyBM/6/
I want to use Bootstrap for my UI elements and I am now trying to convert
certain elements to Ember views. I have the following problem:
I embed an input element in a DIV with a given class (control-group). If a
validation error occurs on the field, then I want to add an extra class
"error" to the DIV.
I can create a view based on the Ember.TextField and specify that if the
error occurs the ClassNameBinding should be "error", but the problem is
that class is the set to the input element and not to the DIV.
You can test this by entering a non alpha numeric character in the field.
I would like to see the DIV border in red and not the input field border.
HTML:
<script type="text/x-handlebars">
<div class="control-group">
{{view App.AlphaNumField valueBinding="value" type="text"
classNames="inputField"}}
</div>
</script>
JS:
App.AlphaNumField = Ember.TextField.extend({
isValid: function () {
return /^[a-z0-9]+$/i.test(this.get('value'));
}.property('value'),
classNameBindings: 'isValid::error'
})
Can I set the classNameBindings on the parent element or the element
closest to the input ? In jQUery I would use:
$(element).closest('.control-group').addClass('error');

No comments:

Post a Comment