Documentation

The simplest user interaction can be done by displaying a button and registering a callback for its click event. To simplify things even more, it is possible to use jQuery for that.

Lets start with the addon following HTML code into View and Preview sections:

<button>Click me!</button>
<p class="sample-addon-clicks-counter">Count: 0</p>

Presentation editor is a tool, where a user can create a presentation. In this mode there should be no user interactions coming from an addon, so it's neccessary to disable it with the following code:

presenter.createPreview = function(view, model) {  
     $(view).find('button').click(function (event) {  
        event.preventDefault();  
     });  
};

Note: because a user can add the addon to the presentation multiple times, both View and Preview sections should not use the 'id' attributes.

Next, a click counter is added into presenter.run method:

function AddonSample_create() {  
    var presenter = function () {};  
    var clickCounter = 0;  

    presenter.run = function(view, model) {  
        var $button = $(view).find('button'),  
            $counter = $(view).find('.sample-addon-clicks-counter');  

        $button.click(function (event) {  
            event.preventDefault();  
            clickCounter++;  
            $counter.text('Count: ' + clickCounter);  
        });  
    };  

    presenter.createPreview = function(view, model) {  
        $(view).find('button').click(function (event) {  
            event.preventDefault();  
        });  
    };  

    return presenter;
}