Catch DOM events in custom .js controller

Hi,

I have a custom template(.hbs) with a button inside:

<button data-action="add_item" class="btn btn-primary btn-sm" aria-label="{{str "Add item"}}" role="link" type="button">
    <span class="action-label"> {{str "Add item"}}</span>
</button>

I´m trying to catch the button's click event in the controller like this:

({
    extendsFrom: 'RecordView',
    items: new Array(),

    initialize: function (options) {
        this._super('initialize', [options]);
        console.log('test');
        // app.view.View.prototype.initialize.call(this, options);
        this.context.on('button:add_item:click', this.addItem, this);
    },

    events: {
        //On click of our "button" element
        'click [data-action=add_item]': 'addItem',
    },

    addItem: function(){
        alert();
        myData=new Object();
        myData.field1 ='hola';
        myData.field2 ='mundo';

        this.items.push(myData);
        this.render();
    }
})

But doesn't work.

Thanks for your help.