Trigger a jQuery DOM manipulation event through an EmberJS action

Question

I have a very trivial Ember APP in the making. For the sake of my own sanity, I prefer to do the necessary animations and simple dom events like mouseover/clicks through jQuery within EmberViews.

Let's say I have this:

App.SomeView = Ember.View.extend({

     didInsertElement:function(){
       this.$(element).hover(function(){
                 $(anotherElement).toggle();
       });
     }

});

My template is something like this:

<script type="text/javascript" data-template-name="routeName">
   {{#view SomeView}}
      <button {{action 'something' this}}>    </button>
      <element></element>
       {{#if condition}}
        <anotherElement></anotherElement> 
       {{/if}}
  {{/view}}
</script>

And my controller, accordingly supports the action 'something' like this:

App.SomeController = Ember.Controller.extend({
  condition:false,
  actions:{
    something:function(){
      this.set('condition',true);
    }
  }
});

Everything works great, but what I want the 'something' action to do is to trigger the 'didInsertElement' event in my view so that 'anotherElement' visibility is toggled without me having to write down that code all over again.

Does this make any sense? I tried using 'observables' but could not get them to work.

ALternately, if there are better ways to doing this, those are welcome as well.

Answer 1

You can define an action in your view that does what you want and specify the target for the action to be the view.

<button {{action 'something' target="view"}}></button>

And in your view,

App.SomeView = Ember.View.extend({
  ...

  actions: {
    'something': function() {
      // Do whatever you want.     
    }
  }
});