mardi 1 septembre 2015

Access the element that fired an action

I have two buttons in the application template that fire different actions in my controller. I want to set up ladda.js to add a spinner to the buttons while the ajax function in the corresponding action is waiting to resolve. But to start ladda I have to do something like this...

$('#form-submit').click(function(e){
    e.preventDefault();
    var l = Ladda.create(this);
    l.start();
});

So in my controller I have the typical action setup starting an ajax function. But what would be the best way to get the button that fired the action so I can start ladda like it shows above?

For reference here are the buttons in the template

// templates/application.hbs
<li class="navbar-right"><button {{action 'startBot'}} class="btn btn-success ladda-button" data-style="slide-down"><span class="ladda-label">Start Bot</span></button><button {{action 'stopBot'}} class="btn btn-danger ladda-button" data-style="slide-down"><span class="ladda-label">Stop Bot</span></button></li>

And these are the actions in the controller

// controllers/application.js
isConnected: false,
actions: {
  startBot: function(){
    var self = this;
    console.log('starting bot');
    Ember.$.ajax({
      method: 'post',
      dataType: 'json',
      url: 'http://localhost:3000/api/v1/bot',
      success: function(data) {
        console.log(data);
        self.toggleProperty('isConnected');
        self.get('notify').success('Bot started');
      },
      error: function(err) {
        console.log(err);
        self.get('notify').error('There was a problem');
      }
    });
  },
  stopBot: function(){
    var self = this;
    console.log('stoping bot');
    Ember.$.ajax({
      method: 'delete',
      dataType: 'json',
      url: 'http://localhost:3000/api/v1/bot',
      success: function(data) {
        console.log(data);
        self.toggleProperty('isConnected');
        self.get('notify').success('Bot stopped');
      },
      error: function(err) {
        console.log(err);
        self.get('notify').error('There was a problem');
      }
    });
  },
}




Aucun commentaire:

Enregistrer un commentaire