Maison > Article > interface Web > Comment créer une vue simple à l'aide de Backbone.js
Comment créer une vue simple à l'aide de Backbone.js
- 不言original
- 2018-11-30 17:37:302440parcourir
Comment créer une vue simple à l'aide de Comment créer une vue simple à laide de Backbone.js ? Cet article vous explique comment utiliser Comment créer une vue simple à laide de Backbone.js pour créer une vue simple. Jetons un coup d'œil au contenu spécifique.
Exemple 1 :
Le code est le suivant
Créez le fichier HTML suivant.
<!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>Explication :
var CView = Backbone.View.extend({
});Le code ci-dessus devient l'objet de la vue. Dans ce code, rien n'est implémenté.
var mView = new CView; $('#output').append(mView.el);
Nous créons un objet de la vue et ajoutons l'attribut el de l'objet de vue à l'élément tag qui génère l'identifiant.
Exécuter les résultats
Lorsque le fichier HTML est affiché dans le navigateur Web, l'effet suivant sera affiché. Rien ne semble s'afficher.
Lors de la confirmation de la sortie du HTML, vous pouvez voir que la balise div est ajoutée à l'intérieur de la balise div avec id="output". Bien que la chaîne ne soit pas affichée sur la page, vous pouvez confirmer que les éléments de la vue sont reflétés sur la page.
Exemple 2 : Vue pour l'affichage des chaînes
Implémente View pour pouvoir afficher les chaînes.
Le code est le suivant
Écrivez le fichier HTML suivant.
<!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>Référence : Cela fonctionne également avec le code suivant.
$(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);
});Description :
Décrit l'implémentation du rendu dans la méthode de rendu. Le balisage à afficher au format HTML est défini sur l'objet el. L'objet jquery de el peut être utilisé comme $el. Puisque ce code utilise jquery, nous utilisons $el au lieu de el. Appelez la méthode text et définissez la chaîne "Hello World!" sur l'objet el.
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});Crée un objet pour la vue. Appelez la méthode render() pour l'affichage de la page. En exécutant la méthode de rendu, la chaîne "Hello World!" est définie sur l'attribut el et le contenu d'affichage de la page peut être préparé.
Ensuite, il affiche le contenu de l'attribut el dans un élément dont la valeur est id. La propriété el peut faire référence à la propriété el de l'objet View, et le même résultat peut être obtenu en référençant la propriété el de l'objet View renvoyée comme valeur de retour de la méthode render().
var mView = new CView; $('#output').append(mView.render().el);
Ou,
var mView = new CView; mView.render(); $('#output').append(mView.el);
Exécution des résultats
Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché. La chaîne "Hello World!" s'affiche sur la page.
Lorsque vous vérifiez la sortie du HTML, vous pouvez voir que la balise div est ajoutée à l'intérieur de la balise div avec id="output" et la chaîne "Hello World! " Écrivez-y.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!