Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine einfache Ansicht mit Backbone.js
So erstellen Sie eine einfache Ansicht mit Backbone.js
- 不言Original
- 2018-11-30 17:37:302496Durchsuche
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.
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;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>Erklärung:
var CView = Backbone.View.extend({
});Der obige Code wird zum Objekt der Ansicht. In diesem Code ist nichts implementiert.
var mView = new CView; $('#output').append(mView.el);
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.
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('Hello World!');
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>Referenz: Es funktioniert auch mit dem folgenden Code.
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
mView.render();
$('#output').append(mView.el);
});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('Hello World!');
return this;
}
});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; $('#output').append(mView.render().el);
Oder
var mView = new CView; mView.render(); $('#output').append(mView.el);
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.
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!