Ember Components and Action Events

Design
1

Every time I seem to think I understand how ember works, I quickly realize I don’t.

Can someone explain why the event logic doesn’t seem to work here?

Uncaught TypeError: Object #<HTMLDivElement> has no method 'send'

http://jsbin.com/uFOCAVo/6/

I am trying to wrap a simple jQuery slider in an Ember component and register the change event.

1 Like
2

Just use a closure http://jsbin.com/oCoPeja/2/

1 Like
3

Aww that was the ticket. Thanks. Figured it was something simple.

4

The answer for posterity

App.JquerySliderComponent = Ember.Component.extend({
    classNames: ['slider-component'],
    didInsertElement: function(){
        var self = this;
      
        this.$().slider({
          change: function( event, ui ) {
            console.log('slider changed');
            self.send('sliderDidChange', ui.value);
          },

          slide: function( event, ui ) {
            console.log('slider slide');
            console.log(ui.value);  
          }
        });
    },
  
    actions: {
        sliderDidChange: function(value) {
            console.log("JquerySliderComponent sliderChange %d", value);
            this.sendAction('sliderDidChange', value);          
        }       
    }     

});

elsewhere you can drop the component into a template

  {{ jquery-slider sliderDidChange="sliderUpdate" }}

sliderUpdate is an action in your route, controller, or elswhere in your app that the component can send its events to.

App.IndexController = Ember.ArrayController.extend({

    actions: {
        sliderUpdate: function(value) {
            console.log("IndexController sliderUpdate %d", value);
        }       
    }   
    
});
1 Like
5

Thanks for sharing your final solution. It is nice to have such a concise example of a component.

6

Thanks @sorentwo

If you are interested in components you should also checkout the source for the twitter bootstrap components.

They have some some good illustration of advanced syntax and how to build highly flexible components.

http://ember-addons.github.io/bootstrap-for-ember/dist/

https://github.com/ember-addons/bootstrap-for-ember/