Struggling getting rid of observers

@robertneville73 wrote:

I've read and watched all of the stuff about "observers are bad". I get it. But I'm having a heck of time wrapping my head around how to get rid of them (I'm slow, sorry).

For example: I have a component that wraps a bootstrap modal. In the spirit of DDAU, my component has an attribute that the parent can set to true or false as to whether this modal should be open or not.

import Ember from 'ember';

export default Ember.Component.extend({

  openModal: false,

  id: "r-modal",

  didRender: function() {
    this.$('#'+this.get('id')).on('hidden.bs.modal', function() {
      this.set('openModal', false);
      this.sendAction('modalClosed');
    }.bind(this));

    this.$('#'+this.get('id')).on('shown.bs.modal', function() {
      this.sendAction('modalOpened');
    }.bind(this));
  },

  setupModalListener: function() {
    if(this.get('openModal')) {
      this.$('#'+this.get('id')).modal('show');
    } else {
      this.$('#'+this.get('id')).modal('hide');
    }
  }.observes('openModal'),
});

How the heck am I supposed to refactor setupModalListener? If I'm only supposed to send data down to the component, then how does one react to it being 'true' if not in an observer? I don't see an obvious way to send actions down either but that's really what I semantically want to do here. I want the parent to say "hey modal, open up" (and the reverse). I'd be happy to call a function from parent to child or issue some sort of action from parent to child, but there doesn't appear to be an obvious mechanism for doing so.

This is literally a case of: I need to call .modal('show') / hide when attribute openModal changes and I don't see how to accomplish that without observes....

Help my thick skull grok this

Posts: 4

Participants: 3

Read full topic