Documentation
String and boolean properties
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');
}
}