Backbone.js のViewでテキストボックスを表示する - JavaScript

Backbone.jsのViewでテキストボックスを生成するコードを紹介します。

プログラム

コード

下記の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: 'input',
        className: 'Cinput',
        id: 'textBox01',
        attributes: {
          type: 'textbox'
        }
      });

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

解説

テキストボックスを表示するため、inputタグを生成します。ViewのtagNameプロパティに'input'を指定します。タグを指定した生成の詳細についてはこちらの記事を参照してください。テキストボックスを作成するためtype属性に"textbox"を指定する必要があります。Viewのattributes:プロパティ内のtypeに"textbox"の値を設定します。

実行結果

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

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

目次

Backbone.js のViewでテキストボックスを表示する - JavaScript

プログラム

コード

解説

実行結果

関連するページ