Ember.Instrumentation & {{action}}

The latest build of Ember.

by ud3323

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <a href="#" {{action inlineEdit.makeBlue this on="mouseDown"}} class="btn ">Blue</a>
    <a href="#" {{action foo this on="mouseDown"}} class="btn ">Foo</a>    
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

Ember.ActionHandler.reopen({
    send: function(actionName) {
        var orininalArguments = arguments, 
            args = [].slice.call(arguments, 1), 
            result;        
        Ember.instrument('action.' + actionName, args, function() {            
            result = this._super.apply(this, orininalArguments);
        }, this);        
        return result;
    }
});

Ember.Instrumentation.subscribe("action.inlineEdit.makeBlue", {
    before: function (name, timestamp, payload) {
       console.log('Before inlineEdit.makeBlue', name, timestamp, payload);
    },
    after: function (name, timestamp, payload) {
       console.log('After inlineEdit.makeBlue', name, timestamp, payload); 
    }
});

Ember.Instrumentation.subscribe("action", {
    before: function (name, timestamp, payload) {
       console.log('Before', name, timestamp, payload);
    },
    after: function (name, timestamp, payload) {
       console.log('After', name, timestamp, payload); 
    }
});

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  },
    actions: {
        'inlineEdit.makeBlue': function() {
            console.log("In inlineEdit.makeBlue event");
        },
        foo: function() {
            console.log("In foo event");
        }        
    }
});