Documentation

To define the addon's property in the Model section, the user should add its name, comma separator, and type. In this case, it may look as follows:

Text to be displayed, string
Color text, boolean

Each of these properties is a property of the model object passed to run/createPreview methods. To read them, the developer doesn't have to perform any special actions, just read a standard JavaScript property.

var textToDisplay = model['Text to be displayed'];
var isTextColored = model['Color text'] === 'True';

Let's extend our view (and preview) with the text container:

<button>Click me!</button>  
<p class="sample-addon-clicks-counter">Count: 0</p>  
<div>Some text from model: <span class="some-text-container"></span></div>

To handle this functionality, it's necessary to define the displayText() function and execute it in both run and createPreview methods.

function displayText() {  
    var textToDisplay = presenter.model['Text to be displayed'],  
        isTextColored = presenter.model['Color text'] === 'True',  
        $textContainer = presenter.$view.find('.some-text-container');

    $textContainer.text(textToDisplay);  
    if (isTextColored) {  
        $textContainer.css('color', 'red');  
    }  
}