読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【初心者向け】Riot.jsを触ってみた。

f:id:sitk:20160614154303p:plain

polymerとか流行ってるっぽいですが。。。

さっぱり、ついていけないので。。。

まずは、お手軽なRiot.js(ライオット ジェイ・エス)を触ってみた。

と、その前に。。。

まずは、polymerの説明

https://www.polymer-project.org/1.0/

  • HTMLコンポーネントで、実装できるようになる
  • GoogleMapを表示させる時に便利
  • タグだけかいて、ものを出せる
  • タグの中身を定義する(これが難しい)
  • videoタグとか
  • Google Play Musicで使われてる( https://play.google.com/store/music?hl=ja
  • 勉強会するには敷居が高すぎる

こちらも、ご参考に。。。

html5experts.jp

Riot.js

riotjs.com

ということで、Riot.jsです。

  • 擬似的に再現される
  • 自分でマイフレームワークを作るときには、こちらの方が簡単
  • コンポーネント系のライブラリ
  • CSS、HTMLで分離してたけど、riotはまとめれる(これに未だに慣れないw)

コンポーネント化できるっていうのは、管理する上ではよさ気です。

ToDoアプリ

なにわともあれ、自分で作ってみる!

<実装内容>

  • 「todo」を追加
  • 「todo」を削除
  • 「すべて削除」の実装
  • 「todo」がないときは、「すべて削除」を非表示
  • 4項目目以降の項目を赤字に

完成形はこちら

http://kobatatakayuki.github.io/todo/

下記ソースコードをコピペしてもらえれば、そのまま動くと思います。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ToDo Demo</title>
</head>
<body>

    <h1>ToDo</h1>

    <todo></todo>


<script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
<script src="todo.tag" type="riot/tag"></script>
<script>
    //riot.mount('*')

    riot.mount('todo', {
      title: 'I want to behave!',
      items: [
        { title: 'Avoid excessive caffeine', done: true },
        { title: 'Hidden item',  hidden: true },
        { title: 'Be less provocative'  },
        { title: 'Be nice to people' }
      ]
    })


</script>

</body>
</html>

todo.tag

<todo>

  <!-- layout -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items } class="{changeColor(i)}">{ item } <button onclick={ remove } data-id={ i }>削除</button></li>
  </ul>

  <button onclick={ removeAll } if={hasitem()} >すべて削除</button>

  <form onsubmit={ add }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style scoped>
    h3 {
      font-size: 14px;
    }

    .red {
        color: red;
    }

  </style>

  <!-- logic -->
  <script>
    this.items = []

    //項目を追加する
    add(e) {
      var input = e.target[0];
      //inputが空の場合、項目追加ができないようにする処理(うまく動かない。。。)
      //if(!imput.value){
      //    return false;
      //}
      this.items.push(input.value);
      input.value = '';
    }

    //項目を1つ消す
    remove(e) {
        //alert("消す");
        var id = e.target.dataset.id;
        //alert(removeButton);
        this.items.splice(id,1);

        //シンプルな書き方
        //splice:配列の何番目を削除するかを指定したものを「1」つ削除する
        //this.items.splice(e.item.i,1);
    }

    //項目をすべて消す
    removeAll() {
        //中身を空にする
        this.items = [];
    }

    //項目がない場合は、「すべて削除」ボタンを非表示
    hasitem() {
        if(this.items.length){
            return true;
        }
        return false;
    }

    //classの操作(3番目以降の項目にclassを追加する)
    changeColor(i) {
        if(i > 2){
            //classにredを追加する
            return "red";
        }
        return "";
    }

  </script>

</todo>

参考サイト

phiary.me

この図を見ると、立ち位置がわかりやすい

paiza.hatenablog.com

まとめ

  • .tagの拡張子で書くと明示的に分かれててわかりやすい
  • ひとつの塊をタグとして扱う
  • codaの設定で「エディタ>カスタム言語モード」で、拡張子「tag」を追加し、言語モードを「HTML」にする
  • まずは、サンプルをたくさん見る( http://riotjs.com/play/

おわり。