Riot.js が気持いぃ

まだ実験中の記法みたいな感じですが、riot.jsのClassサポートによるSPAの書き方が非常に気持ちよかったのでメモ。

コンポーネントを作る

var riot = require("riot")

class Header extends riot.Tag {
    constructor(el) {
        console.log(el)
        super({ tmpl: Header.template() }, { root: el })
        this.msg = 'hello'
    }
    bye() {
        this.msg = 'goodbye'
    }
    static template() {
        return require("../tmpl/header.html")
    }
}

module.exports = function(el){
    console.log("header factory called")

    return new Header(el)
}

コンポーネントはコントラクタでDOMを受け取ってマウントする形のクラスで記述できます。

マウントする際にはnewにDOM渡して、mount()をコールするだけ。

ルーティング

ルーティングも凄いシンプルに書ける。素敵。

var riot = require("riot")

var TopModule = require("./module/top");
var HelpModule = require("./module/help");
var 404Module = require("./module/404");

document.addEventListener("DOMContentLoaded", function(){

    riot.route.start();
    var $view = document.querySelector("route");

    riot.route('top',function(){
        $view.textContent = null;
        new TopModule($view).mount();
    })

    riot.route('help',function(){
        $view.textContent = null;
        new HelpModule($view).mount();
    })

    riot.route('*',function(){
        $view.textContent = null;
        new 404Module($view).mount();
    })

}, false);