2016年05月22日

Riot.js入門

Riot.jsが気になるので触ってみる。とりあえずriotをインストール。

npm i --g riot


以下の.tagファイルを作成

tags/app.tag

<app>
<name first="Hello" last="World"></name>
</app>


tags/name.tag

<name>
<h1>{ opts.last }, { opts.first }</h1>
</name>


以下のコマンドでtagsフォルダのファイルをコンパイル結合してpublic/tags.jsとして書き出します。

riot tags public/tags.js


public/tags.js

riot.tag2('app', '<name first="Hello" last="World"></name>', '', '', function(opts) {
});

riot.tag2('name', '<h1>{opts.last}, {opts.first}</h1>', '', '', function(opts) {
});


以下の様なpublic/index.htmlで作成したtasを利用できるようになります。

public/index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<!-- ここにマウント -->
<app></app>

<script src="http://cdn.jsdelivr.net/riot/2.3/riot.min.js"></script>
<script src="tags.js"></script>

<!-- 通常のマウント -->
<script>
riot.mount('*')
</script>
</body>
</html>


-wオプションをつけておくとtagsディレクトリを監視することができます。

riot -w tags public/tags.js


app.tagを以下のように変更して簡単なTODOリストを作成。(オフィシャルのTODOを参考に)

<app>
<h1>{ title }</h1>
<p>計 {items.filter(onlyNotDone).length}/{items.length} アイテム</p>
<ul>
<li each={ items } class={ completed: done }>
<input type="checkbox" checked={ done } onclick={ parent.toggle }>
{ title }
</li>
</ul>
<form onsubmit={ add }>
<input name="input" onkeyup={ edit }>
<button>Add</button>
</form>
<input type="button" value="削除" onclick={ deleteItem }>
<style>
.completed {
text-decoration: line-through;
color: #ccc;
}
</style>
<script>
this.title = "TODO APP"
this.items = [{title:"foo"},{title:"bar"}];
edit(e) {
this.text = e.target.value
}
add(){
if (this.text) {
this.items.push({ title: this.text })
this.text = this.input.value = ''
}
}
toggle(e) {
var item = e.item
item.done = !item.done
return true
}
onlyNotDone(item){
return !item.done
}
deleteItem(item){
this.items = this.items.filter(function(item) {
return !item.done
})
}
</script>
</app>


ひとまず今日はここまで
タグ:Riot.js
posted by ねこまんま at 00:51 | Comment(0) | TrackBack(0) | Riot.js | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/438128860
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック