StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POEmber: how to set classNameBindings on parent element of view
text
Body
copied!<p>See <a href="http://jsfiddle.net/4ZyBM/6/" rel="nofollow">http://jsfiddle.net/4ZyBM/6/</a></p> <p>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:</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>HTML:</p> <pre><code><script type="text/x-handlebars"> <div class="control-group"> {{view App.AlphaNumField valueBinding="value" type="text" classNames="inputField"}} </div> </script> </code></pre> <p>JS:</p> <pre><code>App.AlphaNumField = Ember.TextField.extend({ isValid: function () { return /^[a-z0-9]+$/i.test(this.get('value')); }.property('value'), classNameBindings: 'isValid::error' }) </code></pre> <p>Can I set the classNameBindings on the parent element or the element closest to the input ? In jQUery I would use: </p> <pre><code>$(element).closest('.control-group').addClass('error'); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload