Comment créer une vue simple à l'aide de Backbone.js-js tutoriel-php.cn

Comment créer une vue simple à l'aide de Backbone.js

不言

Libérer： 2018-11-30 17:37:30

original

2486 Les gens l'ont consulté

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.

Comment créer une vue simple à laide de Backbone.js

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

Copier après la connexion

Explication :

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

Copier après la connexion

Le code ci-dessus devient l'objet de la vue. Dans ce code, rien n'est implémenté.

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

Copier après la connexion

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.

Comment créer une vue simple à laide de Backbone.js

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(&#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>

Copier après la connexion

Référence : Cela fonctionne également avec le code suivant.

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

Copier après la connexion

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(&#39;Hello World!&#39;);      
    return this;
    }
  });

Copier après la connexion

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;
  $(&#39;#output&#39;).append(mView.render().el);

Copier après la connexion

Ou,

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

Copier après la connexion

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.

Comment créer une vue simple à laide de Backbone.js

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!