es6環境でVue.jsとbackbone.jsを組み合わせてみた



ここ一年程で人気が鰻上りしている
javascriptのフロントエンド フレームワーク Vue.jsも1.0.*になり、
だいぶ安定してきました。

データバインディングが簡単に出来るVue.jsですが、
デフォルトではajaxの機能が実装されていない為
AjaxのGet等の機能を使うにはjQuery等と組み合わせる必要があります。

小規模ではjQueryとの組み合わせても問題ないのですが、
大規模になってコード量が増えてくると、jQuery一つでは見通しで悪くなってきます。

それでは、コードの可視性を上げる為、
Backbone.jsのModelを組み合わせてたらどうなるのでしょうか?

今回は、Babelを使ってVue.jsとBackboneのModelの連携をES6で検証してみました。
( 最後にgulpを使ってコンパイルしました )

主な動作テストは下記の3つです

  1. backbone.jsのmodelのプロパティが問題なく出来るか
  2. modelプロパティに値をsetして、データバインディングが可能かどうか
  3. backbone.jsのajaxメソッドがVue.js側で動くか
     

テスト用のHTMLコード

id="demo"の中で全て完結させれるように、最小限のHTMLコードしか書いていません。

<!-- CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>

<div id="demo">
  <!-- Backboneの model.get()テスト  -->
  <div>Vue variable: <span v-text="title"></span></div>

  <!-- model.set()テスト -->
  <div>Vue Set Test: <span v-text="set"></span><button class="btn btn-primary" v-on:click="setModel">Call ajax</button></div>

  <br><br>
 <!-- ajaxデータ取得  -->
 <button class="btn btn-primary" v-on:click="callAjax">Call ajax</button>
</div>


javascript側のコード

ajaxデータの取得部分では 以前に紹介したことがある「json gerator」を使っています。

関連記事: json generatorの過去エントリー

// プロパティ取得のテスト
class Model extends Backbone.Model
{
  defaults() {
    return {
      title: 'here is default value on Backbone Model',
      set: ''
    };
  } // end defaults()
}

// ajaxのテスト
class ajaxModel extends Backbone.Model
{
  url () {
      return 'http://www.json-generator.com/api/json/get/cvMXeHcBKa?indent=2';
    }
}

class DemoView extends Vue
{
  constructor () {
     // call model
     var model = new Model();
     // call ajax model
     var ajax_model = new ajaxModel();

      var properties = {
        el : '#demo',
        data : {
          title: model.get('title') ,
          set: ''
        },

        methods : {
          setModel: () =>
          {
            // データバインディングの2度手間
            model.set({'set': 'done set valiable'});
            this.set = model.get('set');

            console.log(this.set);
          },
          callAjax: () =>
          {
             ajax_model.fetch({
                success: function (model, resp) {
                  console.log(resp);

                } // END sucess
              }); // END fetch

          } //END callAjax

        } //END methods


      }; // END properties

      // vue.jsのプロパティの読み込み
      super(properties);

    } //END constructor

} //END class Demo

// demoモデルのインスタンス化
let view = new DemoView();

 

Summary

ES6環境で問題なくVue.jsとBackbone.jsの連携は出来ましたが、
データバインディングの部分ではどうしても2度手間になってしまいます。
( backboneのプロパティとVue.js側のdata内を変更する必要があるため )

2度手間を省く為にBackbone.jsのmodel部分ではAjaxの接続部分だけにし、
データの処理はVue.jsで完結させたほうが綺麗に書けそうです。

今回の検証でES6環境でも問題なくスラスラVue.jsを書けることがわかったので、
機会があれば、参考にしてください。

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ