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

RiotJS+Firebaseでの簡易追加&読み込み

なんか開発 JavaScript

riot.js+firebase.databaseのサンプル

<head>
  <title>firebase-crud-riot</title>
  <meta charset="utf-8">

  <script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>

  <script>
    var config = {
      apiKey: "AIzaSyAa2o0rn7Dzck-twQwCRP3DUDjjG_EKpW8",
      authDomain: "fir-test-no9-r1.firebaseapp.com",
      databaseURL: "https://fir-test-no9-r1.firebaseio.com",
      storageBucket: "fir-test-no9-r1.appspot.com",
      messagingSenderId: "270240482150"
    };
    var mainApp = firebase.initializeApp(config);
    var crud = mainApp.database().ref('test/crud');
  </script>
</head>
<body>
  <div id="memo_list"></div>

  <script type="riot/tag">
  // メモ一覧
  <memo_list>
    <h3>RiotJS+Firebaseでの追加&読み込み</h3>
    <ul>
      <li each={ items } id={id} onclick={ test }>
        { text }
      </li>
    </ul>

    <script>
    var _this = this;
    _this.items = [];
    crud.on('child_added', function(ss) {
      _this.items.push({id: ss.key, text: ss.val()});
      riot.update();
    });
  </memo_list>

  // 入力フォーム
  <input_form>
    <form onsubmit={ submit }>
      <input type="text"/>
      <input type="submit" value="送信"/>
    </form>

    <script>
    this.submit = function(e){
      var value = e.target.getElementsByTagName("input")[0].value;
      crud.push(value);
    }
  </input_form>

  // メモ
  <memo_list_component>
    <memo_list/>
    <input_form/>
  </memo_list_component>
  </script>

  <script>
    riot.mount('#memo_list', 'memo_list_component');
  </script>
</body>

解説

  • コンポーネントへの値の渡し方
  • ループ方法(each)
  • 標準イベントの追加
  • 複数のriot/tagの読み込みと各種mount方法と
    上記追記予定

surumereflection.hatenadiary.jp

surumereflection.hatenadiary.jp