So erstellen Sie eine einfache Ansicht mit Backbone.js-js-Tutorial-php.cn

So erstellen Sie eine einfache Ansicht mit Backbone.js

不言

Freigeben： 2018-11-30 17:37:30

Original

2496 Leute haben es durchsucht

Wie erstelle ich eine einfache Ansicht mit So erstellen Sie eine einfache Ansicht mit Backbone.js? In diesem Artikel erfahren Sie, wie Sie mit So erstellen Sie eine einfache Ansicht mit Backbone.js eine einfache Ansicht erstellen.

So erstellen Sie eine einfache Ansicht mit Backbone.js

Beispiel 1:

Der Code lautet wie folgt

Erstellen Sie die folgende HTML-Datei.

<!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>

Nach dem Login kopieren

Erklärung:

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

Nach dem Login kopieren

Der obige Code wird zum Objekt der Ansicht. In diesem Code ist nichts implementiert.

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

Nach dem Login kopieren

Wir erstellen ein Objekt der Ansicht und fügen das el-Attribut des Ansichtsobjekts zum Tag-Element hinzu, das die ID ausgibt.

Ergebnisse ausführen

Wenn die HTML-Datei im Webbrowser angezeigt wird, wird der folgende Effekt angezeigt. Es scheint nichts angezeigt zu werden.

So erstellen Sie eine einfache Ansicht mit Backbone.js

Beim Bestätigen der Ausgabe des HTML können Sie sehen, dass das div-Tag innerhalb des div-Tags mit id="output" hinzugefügt wurde. Obwohl die Zeichenfolge nicht auf der Seite angezeigt wird, können Sie bestätigen, dass die Ansichtselemente der Ansicht auf der Seite widergespiegelt werden.

Beispiel 2: View für die String-Anzeige

Implementiert View, um Strings anzeigen zu können.

Der Code lautet wie folgt

Schreiben Sie die folgende HTML-Datei.

<!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>

Nach dem Login kopieren

Referenz: Es funktioniert auch mit dem folgenden Code.

$(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);
    });

Nach dem Login kopieren

Beschreibung:

Beschreibt die Rendering-Implementierung in der Render-Methode. Das in HTML auszugebende Markup ist auf el object eingestellt. Das JQuery-Objekt von el kann als $el verwendet werden. Da dieser Code jquery verwendet, verwenden wir $el anstelle von el. Rufen Sie die Textmethode auf und setzen Sie die Zeichenfolge „Hello World!“ auf das el-Objekt.

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

Nach dem Login kopieren

Erstellt ein Objekt für die Ansicht. Rufen Sie die render()-Methode für die Seitenanzeige auf. Durch Ausführen der Render-Methode wird die Zeichenfolge „Hello World!“ auf das el-Attribut gesetzt und der Inhalt der Seitenanzeige kann vorbereitet werden.
Anschließend wird der Inhalt des el-Attributs in einem Element angezeigt, dessen Wert id ist. Die el-Eigenschaft kann auf die el-Eigenschaft des View-Objekts verweisen, und das gleiche Ergebnis kann durch Verweisen auf die el-Eigenschaft des View-Objekts erzielt werden, das als Rückgabewert der render()-Methode zurückgegeben wird.

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

Nach dem Login kopieren

Oder

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

Nach dem Login kopieren

Laufergebnis

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt. Auf der Seite wird die Zeichenfolge „Hello World!“ angezeigt.

So erstellen Sie eine einfache Ansicht mit Backbone.js

Wenn Sie die Ausgabe des HTML überprüfen, können Sie sehen, dass das div-Tag innerhalb des div-Tags mit id="output" und der Zeichenfolge „Hello World!“ hinzugefügt wurde. „Schreiben Sie hinein.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine einfache Ansicht mit Backbone.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!