Colección extendida de Backbone.js

En este artículo, veremos la colección extendida de Backbone.js. La colección extendida de Backbone.js se puede usar para extender la clase de colección de la red troncal en la que podemos crear nuestra propia colección. También facilita las propiedades de la instancia y las propiedades de clase opcionales que se adjuntan directamente a la función constructora de la colección.

Sintaxis :

Backbone.Collection.extend(properties, classProperties)     

Parámetros : Tomará 2 parámetros, los cuales se describen a continuación:

  • properties : este parámetro proporciona las propiedades de la instancia para la clase de colección especificada.
  • classProperties : esta propiedad de clase se adjunta a la función constructora de la colección.

Ejemplo 1: En este ejemplo, ampliaremos una colección creando un valor.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Backbone.js extend Collection
    </title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript">
    </script>
</head>
  
<body>
    <script>
        var data = Backbone.Model.extend({
            defaults: {
                id: '1',
                name: 'GeeksforGeeks User',
            },
        });
        var data1 = Backbone.Collection.extend({
            model: data,
        });
        var final = new data1({});
        document.write('Values : ', JSON.stringify(final));
    </script>
</body>
</html>

Producción:

Values : [{"id":"1","name":"GeeksforGeeks User"}]

Ejemplo 2:   En este ejemplo, ampliaremos una colección creando múltiples valores.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
       Backbone.js extend Collection
    </title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript">
    </script>
</head>
  
<body>
    <script type="text/javascript">
        var data = Backbone.Model.extend({
            defaults: {
                id: '1',
                name: 'GeeksforGeeks User',
                address: 'New Delhi',
            },
        });
        var data1 = Backbone.Collection.extend({
            model: data,
        });
        var final = new data1({});
        document.write('Values : ', JSON.stringify(final));
    </script>
</body>
</html>

Producción:

Values : [{"id":"1","name":"GeeksforGeeks User","address":"New Delhi"}]

Referencia : https://backbonejs.org/#Collection-extend

Publicación traducida automáticamente

Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *