mardi 11 août 2015

Strange component behaviour

I have a general component called ‘alert-box` it relies on events emitted from the controller to show an error div. So In a form of 10 fields say I will have 10 of them. In order for it to show up it changes the bindings of the classes to show and hide the component. I upgraded to v1.13.x from v1.11 and only some of the alert-box component are working on a form for some reason some component instances have stop reacting to the binding of the show/hide boolean property. Below is the code:

export default Ember.Component.extend({
  classNames: ['alert-box', 'alert'],
  classNameBindings: ['hideAlert:hide-alert'],
  offFor: '',
  messsage: '',
  hideAlert: true,
  generalError: false,
  for: '',
  obsOffFor: function() {
    this.set('hideAlert', true );
  }.observes('offFor'),
  hideError: function(forElement) {
    if (this.get('for') === forElement) {
      this.set('message', '');
      this.set('hideAlert', true);
    }
  },
  didInsertElement: function() {
    var _scope = this;
    if (this.get('general') != null) {
      this.set('generalError', true);
    } else {
      this.set('generalError', false);
    }

    this.get('targetObject').on('showAlert', function(message, forElement){
      // _scope.showError(message, forElement);
      _scope.send('showError',message, forElement);
    });

    this.get('parentView').on('showAlert', function(message, forElement){
      // _scope.showError(message, forElement);
      _scope.send('showError',message, forElement);

    });

    this.get('targetObject').on('hideAlert', function(forElement){
       _scope.hideError(forElement);
    });

    this.get('parentView').on('hideAlert', function(forElement){
       _scope.hideError(forElement);
    });
  },
  willClearRender: function(){
    this.get('targetObject').off('showAlert', this);
    this.get('parentView').off('showAlert', this);
    this.get('targetObject').off('hideAlert', this);
    this.get('parentView').off('hideAlert', this);
  },
  actions: {
    showError: function(message, forElement){
      if(this.get('for') === forElement){
        this.set('message', message);
        this.set('hideAlert', false);
      }
    }
  }
});

In the showError function when setting hideAlert to false it should show the error div. But am lost as to why some work and some do not. In 1.13 is listening on emitted event still a good way to go?




Aucun commentaire:

Enregistrer un commentaire