はじめに

(1/2)はこちら

前回firebaseの機能を20行のコード追加で動くようにしてみました。

まとめると

配列への要素追加時にcallback関数が呼ばれるので、そのcallback関数内でVue.jsのModelへの追加処理を行う
元々の「Vue.jsのModel内の配列へ要素追加を行う」処理だった部分を「firebaseのModelへ要素追加を行う」処理に変更。

上記２点の処理追加or変更を行いました。
図にするとこういうイメージになります。

上図のVue.jsのModelとfirebaseのModelの間の追加処理の部分を実装したイメージとなります。
それ以外はそれぞれのライブラリが吸収してくれるわけですね。便利です。

今回は更に、要素に対する「変更」、「削除」も対応してみます。

配列に対する追加、変更、削除のコールバック関数の対応は以下となります。

firebaseのModelの変更をVue.jsのModelに反映する

firebaseのModelを取得

Model

var baseURL = 'https://<<アプリのURL>>.firebaseio.com/',
var Messages   = new Firebase(baseURL + 'messages');

firebaseが配列への追加を検出した際のcallbak

event_type:child_added

追加


Message.on('child_added', function (snapshot) {
    var message = snapshot.val();
    message.id = snapshot.name(); //識別子を取得しvue.jsのModelへ登録しておく。この値で変更時のオブジェクトを検出する
    app.messages.push(message); //vue.jsのmodelへの追加処理
});

firebaseが配列要素変更を検出した際のcallbak

event_type:child_changed

変更

Message.on('child_changed', function (snapshot) {
  var id = snapshot.name();
    app.messages.some(function(message) {
        if (message.id === id) {
            message.body = snapshot.val().body; //変更の反映
            return true;
        }
    });
});

firebaseが配列要素削除を検出した際のcallbak

event_type:child_removed

削除

Messages.on('child_removed', function (snapshot) {
    var id = snapshot.name();
      app.messages.some(function(message) {
          if (message.id === id) {
            app.messages.$remove(message); 
            return true;
          }
      });
  });

Vue.jsのModelの変更をfirebaseのModelに反映する

追加

Messages.push(this.newMessage);

変更

Messages.child(message.id).child('body').set(message.body);//事前にidを保存しておかないとここで変更ができない

削除

Messages.child(message.id).remove();//事前にidを保存しておかないと削除できない

コード全体

chat_2.html

<html id="app">
  <head>
    <title v-text="title"></title>
    <script src="https://cdn.firebase.com/js/client/1.0.2/firebase.js" charset="utf-8"></script>
    <script src="http://vuejs.org/js/vue.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div v-repeat="message:messages">
        {{$index}}
        <input v-model="message.body" value="{{message.body}}" v-on="keyup:changeMessage(message)">
        from:{{message.from}}
        <button v-on="click:deleteMessage(message)" >x</button>
        <br>
    </div>
    <form id="form" v-on="submit:addMessage">
        from:<br>
        <input v-model="newMessage.from">
        <br>
        message:<br>
        <input v-model="newMessage.body">
        <input type="submit" value="Add Message">
    </form>
  </body>
  <script charset="utf-8">

  //追加箇所
  var baseURL = 'https://<<自分のURL>>.firebaseio.com/',
  Messages   = new Firebase(baseURL + 'messages');

  //追加時
  Messages.on('child_added', function (snapshot) {
      var message = snapshot.val();
      message.id = snapshot.name(); //識別子を取得しvue.jsのModelへ登録しておく。この値で変更時のオブジェクトを検出する
      app.messages.push(message); //vue.jsのmodelへの追加処理
  });

  //変更時
  Messages.on('child_changed', function (snapshot) {
    var id = snapshot.name();
      app.messages.some(function(message) {
          if (message.id === id) {
              message.body = snapshot.val().body; //変更の反映
              return true;
          }
      });
  });

  //削除時
  Messages.on('child_removed', function (snapshot) {
    var id = snapshot.name();
      app.messages.some(function(message) {
          if (message.id === id) {
            app.messages.$remove(message); 
            return true;
          }
      });
  });

  var app = new Vue({
      el: '#app',
      data: {
          title:'Hello myChat',
          messages: [],
          newMessage: {
              from: '',
              body: ''
          },
      },
      methods: {
          addMessage: function(e) {
              e.preventDefault(); //submitをキャンセル

              Messages.push(this.newMessage);
              this.newMessage.body = ''

          },
          changeMessage: function(message) {
            console.log("changeMessage:" + message.body);
            Messages.child(message.id).child('body').set(message.body)
          },
          deleteMessage: function(message) {
            console.log("deleteMessage:" + message.body);
            Messages.child(message.id).remove();
          }

      }
  });

  </script>
</html>

課題

ここまでは、簡単に作れて感動しましたが、
DB周りが完全公開状態でやりたい放題なのを、なんとかする必要があります。
次回はその辺をまとめてみます。

おまけ：firebaseのダッシュボードから変更したり、変更を見たりできる。

Vue.js+firebaseでJS MVVMフレームワークに入門する(2/2)