Rating
A LemonadeJS self property can be bound to an HTML DOM element attribute. In this sense, the HTML elements will automatically update when a self property value changes.
Examples
A basic star rating implementation
Source code
<html>
<script src="https://lemonadejs.com/v2/lemonade.js"></script>
<div id='root'></div>
<script>
var Rating = (function() {
var self = {}
// Five stars
self.stars = [{},{},{},{},{}];
// Current clicked star self
var current = null;
self.click = function(s) {
// If the self of the clicked item is not selected reset the null
if (! s.selected) {
current = null;
}
// Get the position of the self of the clicked item
var index = self.stars.indexOf(s);
// Go through all stars and define select or non selected
for (var i = 0; i < self.stars.length; i++) {
if (i <= index && s !== current) {
self.stars[i].selected = 1;
self.stars[i].el.style.color = 'red';
} else {
self.stars[i].selected = 0;
self.stars[i].el.style.color = '';
}
}
// Keep the the self of the last item clicked
current = s;
}
var template = `
<div @loop="self.stars" style="cursor: pointer">
<i class="material-icons"
onclick="self.parent.click(self)">{{self.selected ? 'star' : 'star_outline'}}</i>
</div>`;
return lemonade.element(template, self);
}
lemonade.render(Rating, document.getElementById('root'));
</script>
</html>