Colección Backbone.js unshift

La colección unshift de Backbone.js se usa para agregar un modelo al comienzo de una colección. Toma modelo como primer parámetro y opciones como segundo parámetro. En este artículo, discutiremos la colección unshift de Backbone.js. 

Sintaxis: 

collection. unshift( model, options );

Parámetros: 

  • modelo: este parámetro se usa para especificar la instancia del modelo que se agregará a la colección.
  • opciones: Este es un parámetro opcional con respecto al modelo que se agrega a la colección.

Ejemplo 1: En este ejemplo, ilustraremos la colección unshift de Backbone.js . En este ejemplo, agregaremos 2 modelos usando unshift en la colección.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>BackboneJS unshift 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.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>BackboneJS unshift collection</h3>
      
    <script type="text/javascript">
        var Book = Backbone.Model.extend();
  
        var books = Backbone.Collection.extend({
            model: Book
        });
  
        var Library = new books();
  
        var b1 = new Book({ 
            title: "catch-22", 
            Author: "Joshep Heller" 
        });
          
        var b2 = new Book({ 
            title: "Invisible Man", 
            Author: "Ralph Ellison" 
        })
  
        Library.unshift(b1);
        Library.unshift(b2);
  
        document.write("Values :  <br> ");
        document.write(JSON.stringify(Library));
    </script>
</body>
  
</html>

Producción:

Colección sin cambios de Backbone.js

Ejemplo 2: En este ejemplo, agregaremos nuevamente dos modelos al comienzo de la colección.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>BackboneJS unshift 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.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>BackboneJS unshift collection</h3>
      
    <script type="text/javascript">
        var Book = Backbone.Model.extend();
  
        var books = Backbone.Collection.extend({
            model: Book
        });
  
        var Library = new books();
  
        var b1 = new Book({ 
            title: "catch-22", 
            Author: "Joshep Heller" 
        });
          
        var b2 = new Book({ 
            title: "Invisible Man", 
            Author: "Ralph Ellison" 
        })
  
        Library.unshift(b1);
        Library.unshift(b2);
  
        document.write("Values :  <br> ");
        document.write(JSON.stringify(Library));
  
        document.write("<br><br>");
  
        var b3 = new Book({
            title: "Wings of Fire", Author:
                "A. P. J. Abdul Kalam"
        });
        var b4 = new Book({
            title: "The Palace of Illusion",
            Author: "Chitra Banerjee"
        });
  
        Library.unshift(b3);
        Library.unshift(b4);
  
        document.write("Values again unshited :  <br> ");
        document.write(JSON.stringify(Library))
    </script>
</body>
  
</html>

Producción:

Colección sin cambios de Backbone.js

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

Publicación traducida automáticamente

Artículo escrito por satyam00so 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 *