Backbone.js のViewでリンクを表示する - JavaScript

Backbone.jsのViewでリンクを生成するコードを紹介します。

プログラム1: 通常のリンクを表示する

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script> 
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
  $(function () {
    var CView = Backbone.View.extend({
      tagName: 'a',
      className: 'Clink',
      id: 'link01',
      attributes: {
        href: 'http://www.ipentec.com',
      },
      render: function () {
        this.$el.html('iPentecへのリンクです');
        return this;
      }
    });
   
    var mView = new CView;
    $('#output').append(mView.render().el);
  });
  </script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

解説

リンクを生成するため、Aタグを生成します。ViewのtagNameプロパティに'A'を指定します。タグを指定した生成の詳細についてはこちらの記事を参照してください。リンクの遷移先のhref属性の値は、Viewのattributes:プロパティ内のhrefに値を設定します。
リンクの表示文字列はAタグ内の文字列となるため、renderメソッドに記述します。今回の例では、'iPentecへのリンクです'の文字を表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。id="output" のタグ部分にリンクが表示されます。

リンクをクリックすると、ページが切り替わります。

プログラム2: クリックするとJavaScriptを実行するリンクを表示する

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script> 
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var CView = Backbone.View.extend({
        tagName: 'a',
        className: 'Clink',
        id: 'link01',
        attributes: {
          href: 'javascript:void(0)',
        },
        render: function () {
          this.$el.html('リンクです');
          return this;
        },
        events: {
          'click' : 'onClick'
        },
        onClick: function (event) {
          alert('リンクがクリックされたよ');
        }
      });

      var mView = new CView;
      $('#output').append(mView.render().el);
    });
  </script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

解説

先のコードと同様、Aタグを生成するコードを記述します。リンク先は設定しないため、attributesプロパティ内のhrefには'javascript:void(0)'を指定します。リンクをクリックした際に実行されるコードをclickイベントに実装します。イベントはビューのeventsプロパティ内のclickに実行される関数を設定します。今回のコードでは'onClick'関数を指定しています。onClick関数では、アラートダイアログを表示するコードを記述しています。