record-error-mixin-component.js

import Ember from 'ember';

export default Ember.Mixin.create({
  attributeBindings: ['data-original-title', 'data-toggle', 'data-placement'],
  classNameBindings: ['hasError:has-warning'],
  record: null,
  property: null,
  cacheBust: false,

  /*
   Property that should be checked for the model's property name.  Autocomplete fields need to use `modelProperty`
   instead of `property` because binding them to the model's actual property causes issues with relations.
   */
  errorPropertyAttributeName: 'property',

  // Error tooltip
  hasError: false,
  'data-original-title': null,
  'data-toggle': 'tooltip',
  'data-placement': 'bottom',

  didInsertElement: function() {
    this._super();
    this.$().tooltip();
  },

  valueDidChange: function() {
    if (this.get('record')) {
      this.set('record.' + this.get('property'), this.get('value'));
    }
  }.observes('value'),

  recordValueDidChange: function() {
    this.set('value', this.get('record.' + this.get('property')));
  }.observes('record', 'property').on('init'),

  addRecordPropertyObservers: function() {
    var component = this,
        errorPath = 'record.errors.' + this.get(this.get('errorPropertyAttributeName'));
    this.addObserver(errorPath, this, function() {
      var propertyErrors = component.get(errorPath) || [];

      var errorString = propertyErrors.map(function(error) {
        return error.message.capitalize();
      }).join(', ');

      component.set('data-original-title', errorString || null);
      component.set('hasError', !!errorString);
    });
  }.on('init')
});