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

f:id:sitk:20160614154303p:plain

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

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

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

まずは、polymerの説明
Riot.js
- ToDoアプリ
参考サイト
まとめ

と、その前に。。。

まずは、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>