Exemple BackboneJS

Type objet VS Prototype : BackboneJS

by yannberges

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<html>
  <head></head>
  <body>
    <div>
      <p>
        johnny.identity : <span id="jonny_identity"></span>
      </p>
      <p>
        mireille.identity : <span id="mireille_identity"></span>
      </p>
      <p>
        johnny.identityProto : <span id="jonny_identityproto"></span>
      </p>
      <p>
        mireille.identityProto : <span id="mireille_identityproto"></span>
      </p>
    </div>
  </body>
</html>

JavaScript

// Déclaration d'un composant Person hérité d'une vue Backbone
var PersonView = Backbone.View.extend({
    // Propriété de type objet
    identityProto: {
      name: 'No name'
    },

    /** 
     * Fonction d'initialisation de la vue Backbone
     */
    initialize: function(options) {
      this.identity = {
        name: 'No name'
      };
      
      this.setName(options.name);
    },

    /**
     * Exemple de méthode spécifique à la vue Backbone 
     */
    setName: function(name) {
      this.identity.name = name;
      this.identityProto.name = name;
    }
  });

var johnny = new PersonView({name: 'Johnny'}),
    mireille = new PersonView({name: 'Mireille'});

$('#jonny_identity').html(johnny.identity.name);
$('#mireille_identity').html(mireille.identity.name);
$('#jonny_identityproto').html(johnny.identityProto.name);
$('#mireille_identityproto').html(mireille.identityProto.name);