Riot.js: minimal observable example

by sidouglas

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<script src="https://jasmine.github.io/2.0/lib/jasmine.js"></script>
<script src="https://jasmine.github.io/2.0/lib/jasmine-html.js"></script>
<script src="https://jasmine.github.io/2.0/lib/boot.js"></script>
<link rel="stylesheet" href="https://jasmine.github.io/2.0/lib/jasmine.css">
<receiver></receiver>

<script type="riot/tag">
  <receiver>
    <p>{ message }</p>
    
    this.message = 'Zzz...'
    wakeup () {
      this.message = 'Good morning!'
      this.update()
    }
  </receiver>
</script>

JavaScript

var receiver = riot.mount('receiver')[0]

function Timer() {
  riot.observable(this)

  setTimeout(function() {
    this.trigger('ring')
  }.bind(this), 3000)
}

var timer = new Timer()

timer.on('ring', receiver.wakeup);

function gimmeANumber() {
    var x = 4;
    return x;
}

describe('Hello world', function () {

    beforeEach(function () {
        jasmine.addMatchers({
            toBeDivisibleByTwo: function () {
                return {
                    compare: function (actual, expected) {
                        return {
                            pass: (actual % 2) === 0
                        };
                    }
                };
            }
        });
    });

    it('is divisible by 2', function () {
        expect(gimmeANumber()).toBeDivisibleByTwo();
        expect(5).not.toBeDivisibleByTwo();
    });

});