Ember - Issue with class binding within helper

Question

We upgraded to Ember 1.11.1 and Ember-validations 2.0.0-alpha.3.

Controller

export default Ember.Controller.extend(EmberValidations.Mixin, { 
  canValidate: true,
  validationModel: Ember.computed.alias("model"),
  validations: {
   'validationModel.name': {
      presence: { 'if': 'canValidate', message: 'Please enter a name'},
   },
  },
}

Template

{{log "error value" errors.validationModel.name}}
{{input classBinding="errors.validationModel.name:app_input_box_error:app_input_box" placeholder="Document Name" value=model.name}}

With the above template code in place, validations works as expected and the input's class is swopped out depending on whether there is a validation error or not. However, when the {{log}} line is removed, the class binding seems to be lost and the input class is no longer appropriately updated. Any advice on the cause/fix please?

Note Class bindings outside helpers e.g. in a standard div continues to work properly

Works on my side with ember-validations: 2.0.0-alpha.3 and ember: 1.11.1! Just created a new ember app and pasted your template/controller and created a simple route returning { name: 'test' }. -> Maybe you can post a jsbin? — enspandi, May 16 '15 at 15:53

score 1 · Answer 1 · answered May 14 '15 at 10:13

1

Maybe try this:

{{input classBinding="errors.validationModel.name:app_input_box_error:app_input_box" placeholder="Document Name" value=validationModel.name}}

answered May 14 '15 at 10:13

jax

37,735
57
182
278

Hi, thanks for your answer but the issue is not with the binding of the value. It is with the binding of the class attribute. – RunLoop May 14 '15 at 10:17

score 0 · Answer 2 · answered May 19 '15 at 21:19

I'm not seeing classBinding but classNameBindings in the docs, I'm not sure if something was deprecated along the way.

I would suspect that the classBinding is not triggering the property to be updated, I seem to recall some issues with this on ember-validations at one point not always triggering. Have a look at https://github.com/aceofspades/ember-validations/commit/85ecaa348f2a1ccfb52f614037c4b4dbf77bceb4 and see if that might help.

From a higher level, I would think you'd be repeating this pattern often, adding a class name based on errors ties to the specific field. Personally I might spend some time looking for or building an input component that handles the annotation for ember-validations, where you can have a fieldName property and have it look at the appropriate errors.validation.${fieldName}. Coding in JS might help or at least make it easier to debug.

This is not precisely related to individual fields but might also be of help to you, in particular moving to HTMLBars syntax, i.e.

{{input class="{{if errors.validationModel.name 'app_input_box_error' 'app_input_box'}}"}}

Ember - Issue with class binding within helper

2 Answers2