Backbone.js を使用して簡単なビューを作成する方法-jsチュートリアル-php.cn

Backbone.js を使用して簡単なビューを作成する方法

不言

リリース： 2018-11-30 17:37:30

オリジナル

2516 人が閲覧しました

Backbone.js を使用して簡単なビューを作成する方法を使用して簡単なビューを作成するにはどうすればよいですか?この記事では、Backbone.js を使用して簡単なビューを作成する方法を使用して簡単なビューを作成する方法を紹介します。具体的な内容を見てみましょう。

Backbone.js を使用して簡単なビューを作成する方法

例 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({
      });      
      var mView = new CView;
      $(&#39;#output&#39;).append(mView.el);
    });  
</script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

ログイン後にコピー

説明:

 var CView = Backbone.View.extend({
  });

ログイン後にコピー

上記のコードがビューのオブジェクトになります。このコードでは何も実装されていません。

 var mView = new CView;
  $(&#39;#output&#39;).append(mView.el);

ログイン後にコピー

ビューのオブジェクトを作成し、idを出力するタグ要素にビューオブジェクトのel属性を追加します。

実行結果

HTMLファイルをWebブラウザで表示すると、以下のような結果が表示されます。何も表示されないようです。

Backbone.js を使用して簡単なビューを作成する方法

HTML の出力を確認すると、id="output" の div タグ内に div タグが追加されていることがわかります。ページ上には文字列は表示されませんが、ビューのビュー要素がページ上に反映されていることが確認できます。

例 2: 文字列表示ビュー

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({
        render: function () {
          this.$el.text(&#39;Hello World!&#39;);
          return this;
        }
      });
      var mView = new CView;
      $(&#39;#output&#39;).append(mView.render().el);
    });
  </script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

ログイン後にコピー

参考: 次のコードでも動作します。

$(function () {
      var CView = Backbone.View.extend({
              render: function () {
                        this.$el.text(&#39;Hello World!&#39;);          
                        return this;
        }
      });
      var mView = new CView;
      mView.render();
      $(&#39;#output&#39;).append(mView.el);
    });

ログイン後にコピー

説明:

render メソッドでレンダリングの実装を説明します。 elオブジェクトにはHTMLに出力するマークアップを設定します。 elのjqueryオブジェクトは$elとして利用できます。このコードでは jquery を使用しているため、el の代わりに $el を使用します。 text メソッドを呼び出し、文字列「Hello World!」を el オブジェクトに設定します。

var CView = Backbone.View.extend({
    render: function () {      
    this.$el.text(&#39;Hello World!&#39;);      
    return this;
    }
  });

ログイン後にコピー

ビューのオブジェクトを作成します。ページ表示には render() メソッドを呼び出します。 renderメソッドを実行すると、el属性に「Hello World!」という文字列が設定され、ページの表示内容が準備できます。
次に、値が id である要素の el 属性の内容を表示します。 el プロパティは View オブジェクトの el プロパティを参照でき、render() メソッドの戻り値として返される View オブジェクトの el プロパティを参照しても同様の結果が得られます。

var mView = new CView;
  $(&#39;#output&#39;).append(mView.render().el);

ログイン後にコピー

または、

var mView = new CView;
  mView.render();
  $(&#39;#output&#39;).append(mView.el);

ログイン後にコピー

実行結果

Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。「Hello World!」という文字列がページに表示されます。

Backbone.js を使用して簡単なビューを作成する方法

HTML の出力を確認すると、div タグ内に id="output" と文字列「Hello World!」が追加されていることがわかります。「そこに書いてください。

以上がBackbone.js を使用して簡単なビューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。