Riot.js: Example

by meetravi

HTML

<script src="http://riot.hara.metatexx.de/riot-96d95f77.js"></script>
<title>Some Each Stuff</title>
<my-tag></my-tag>

<script type="riot/tag">
    <my-tag>
        <h3>Title: { opts.test }</h3>
        <div id="clickme" onclick={ doit }>DoIt</div>
        <hr>
        <my-list each={ opts.items }>
            <my-item></my-item>
        </my-list>
        var self = this
        self.once = true
        self.on("update", function() {
            /* always reset at update start */
            self.count = 1
            self.last_group = ""
            self.last_name = ""
        })
            
        self.on("updated", function() {
            /* I want that only once to test dom-reordering
               by the colors */
            self.once = false    
        })
            
        doit() {
            /* first removes element 0
               and swaps 0 with last one afterwards */
            if(!self.opts.items.length) return
            self.opts.items.splice(0, 1);
            var high = self.opts.items.length-1;
            if(high >= 0 ) {
                var tmp = self.opts.items[high]
                self.opts.items[high]=self.opts.items[0]
                self.opts.items[0]=tmp
            }
        }
            
    </my-tag>

    <my-item>
        <my-group if={ new_group }></my-group>
        <div style="color: { color }">{ nr }. { name  } = { price } ( ^ { last } )</div>
        var self = this
        self.on("update", function(el) {
            /* fetch and inc counter */
            var count = self.parent.count
            self.parent.count = count + 1

            self.nr = count
            /* runs only once! */
            if(self.parent.once) {
                /* colorize odd/even */
                if(count % 2 == 0) {
                    this.color = "red";
                } else {
                    this.color = "blue";
                }
            }
            /* track last updated element (name) */
            this.last =...

CSS

#clickme { 
    padding: 0.25em;
    display: inline-block;
    background-color: green;
    color: white
}

JavaScript

riot.mount('my-item');

riot.mount('my-tag', {
    test: "Testing DOM + Update() order",
    items: [
        {"name": "a1 blue", "price": 1, "group": "a"},
        {"name": "a2 red", "price": 2, "group": "a"},
        {"name": "b1 blue", "price": 3, "group": "b"},
        {"name": "b2 red", "price": 4, "group": "b"},
        {"name": "b3 blue", "price": 5, "group": "b"},
        {"name": "c1 red", "price": 6, "group": "c"},
        ]
});