title: Ember Observe DOM Event
body: <p>I am attempting to build a form element in ember. The form element contains a Ember view/component to upload a picture, once the picture is uploaded a thumbnail of the picture is displayed. The form also contains a reset and submit button. When clicking "reset" the file input box clears so I know the "onreset" DOM event is triggering. Let me attempt to diagram:</p>
  
  <pre><code>Accordion: {
      photoUpload: {
            fileUpload: {
                input: {}
            },
            resetButton,
            saveButton
      }
  }
  
  Accordion: simply houses components and handles its own open/close actions.  
  photoUpload: has both a template and a view/controller.  
      photoUpload.hbs: has a form element that houses the fileUpload component and the two buttons.  
      photoUpload.js: handles the actions from the template, such as making the call to the web services.
  fileUpload: Handles the uploading of files, determining there type and displaying a preview/thumbnail if the file is an image.
  input: handles file browsing
  </code></pre>
  
  <p>So the real problem I'm trying to solve is how to kick off an action/funciton/event from the resetButton that can be heard/executed in the sister element fileUpload. When I hit execute my reset button I clear out the input element I am thinking I need to some how observe a property in this input component from my fileUpload component to then clear out the image preview.</p>
  
  <p>Here is an example of the photoUpload template:</p>
  
  <pre><code>&lt;p&gt;Upload a photo.&lt;/p&gt;
  &lt;form {{action 'savePhoto' on='submit'}}&gt;
      {{view FileUpload showPreview=true showProgress=true valueBinding="photo" fileBinding="view.file"}}
      &lt;div class="controls"&gt;
          {{#view Button type="secondary" function="reset" action="resetPhoto"}}Cancel{{/view}}
          &lt;input class="primary" type="submit" value="Save"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is an example of the input component:</p>
  
  <pre><code>function() {
      var _InputElement = Ember.View.extend({
          tagName:           'input',
          attributeBindings: ['type', 'name', 'value', 'readonly', 'disabled', 'required'],
  
          typeBinding:     'parentView.type',
          idBinding:       'parentView.GUID',
          valueBinding:    'parentView.value',
          readonlyBinding: 'parentView.readonly',
          disabledBinding: 'parentView.disabled',
          requiredBinding: 'parentView.required',
          nameBinding:     'parentView.name',
  
          change: Ember.aliasMethod( '_updateValue' ),
          keyUp:  Ember.aliasMethod( '_updateValue' ),
  
          _updateValue: function() {
              var old     = this.get( 'value' );
              var current = this.$().val();
  
              if( current != old ) { // -- value actually changed
                  this.set( 'value', this.$().val());
              }
          }
      });
  
      return Ember.View.extend({
          classNames:        ['input'],
          classNameBindings: ['error:error', '_typeClass'],
          attributeBindings: ['data-label', 'data-name', 'readonly', 'disabled', 'required'],
          _InputElement:     _InputElement,
  
          type:                 'text', // text, password, radio, checkbox, select, etc
          error:                null,
          label:                null,
          prefix:               null,
          postfix:              null,
          name:                 null,
          value:                null,
          readonly:             false,
          disabled:             false,
          showInputBeforeLabel: false,
  
          'data-name': function() {
              var name = this.get( 'name' );
              return (!Ember.isEmpty( name ) ? name.camelize() : undefined);
          }.property( 'name' ),
  
          'data-label': function() {
              var label = this.get( 'label' );
              return (!Ember.isEmpty( label ) ? label.camelize() : undefined);
          }.property( 'label' ),
  
          _typeClass: function() {
              return 'input-%@'.fmt( this.get( 'type' ));
          }.property( 'type' ),
  
          _InputElementGUID: function() {
              var childViews = this.get('childViews');
  
              if ( childViews &amp;&amp; childViews[0] ) { // -- only works if there is ONE child view, as in, ONE _InputElement
                  return childViews[0].get('elementId');
              }
          }.property( '_InputElement', 'childViews.[]' ),
  
          _yieldTemplate: '{{yield}}',
  
          _labelTemplate:     '&lt;label {{bind-attr for="view._InputElementGUID"}}&gt;{{view.label}}&lt;/label&gt;',
          _preLabelTemplate:  function() { return '{{#if view.label}}{{#unless view.showInputBeforeLabel}}' + this.get( '_labelTemplate' ) + '{{/unless}}{{/if}}'; }.property(),
          _postLabelTemplate: function() { return '{{#if view.label}}{{#if     view.showInputBeforeLabel}}' + this.get( '_labelTemplate' ) + '{{/if}}{{/if}}'; }.property(),
  
          _errorTemplate: '{{#if view.error}}&lt;label class="error form-error" {{bind-attr for="view._InputElementGUID"}}&gt;{{view.error}}&lt;/label&gt;{{/if}}',
  
          _prefixTemplate:  '{{#if view.prefix }}&lt;div class="prefix  input-prefix" &gt;{{view.prefix }}&lt;/div&gt;{{/if}}',
          _postfixTemplate: '{{#if view.postfix}}&lt;div class="postfix input-postfix"&gt;{{view.postfix}}&lt;/div&gt;{{/if}}',
  
          layout: function() {
              return Ember.Handlebars.compile( ''
                  + this.get('_preLabelTemplate') + '\n'
                  + this.get('_prefixTemplate') + '\n'
                  + this.get('_yieldTemplate') + '\n'
                  + this.get('_postfixTemplate') + '\n'
                  + this.get('_postLabelTemplate') + '\n'
                  + this.get('_errorTemplate')
              )
          }.property(),
  
          template: Ember.Handlebars.compile( '{{view view._InputElement}}' )
      });
  });
  </code></pre>
  
  <p>and the input component is used like so:</p>
  
  <pre><code>'&lt;div class="input-file-button-wrapper"&gt;{{view view._InputElement}}&lt;/div&gt;\
      &lt;div class="input-file-preview-wrapper"&gt;\
          &lt;img {{bindAttr src="view.file"}} {{bindAttr title="view.fileName"}}/&gt;\
      &lt;/div&gt;'
  </code></pre>
  
  <p>Thanks in advance!</p>