[SOLUCIONADO] Backbonejs: ¿Como pasar una colección a un template?

[cristian_cena]

Hola, contarles que estoy trabajando con backbone y django rest framework

Una vez creada la api rest y ya con datos en el servidor, creo el modelo y la coleccion backbone:

Código Javascript:

var Contact = Backbone.Model.extend();
var Contacts = Backbone.Collection.extend({
    url: '/api/contacts/', //en esta url esta la api rest  
    model: Contact
});
 

Hasta acá todo bien, el problema viene cuando intento pasar la coleccion al template por medio de una vista:

Código Javascript:

var ContactView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render: function(){
        var c = new Contacts();
        var datos;
        var data = c.fetch({
            success: function (model, resp){
                console.log(model); //child {length: 5, models: Array[5], _byId: Object, constructor: function, url: "/api/contacts/"…}
                console.log(resp);  //[Object, Object, Object, Object, Object]
                datos = resp
                console.log(datos); //[Object, Object, Object, Object, Object]
            },
            error: function (model, resp){
                console.log("error");
            }
        });
        
        //var data = c.fetch();
        //console.log(data.toJSON()); //[ ] un maldito arreglo vacío. 
 
        console.log(data);  //Object {readyState: 1, responseJSON: Array[5], responseText: "[{"url": "http://localhost:8000/api/contacts/1/", "id": 1, "first_name": "Alice", "last_name": "Arten", "phone_number": "555-0184"}, {"url": "http://localhost:8000/api/contacts/2/", "id": 2, "first_name": "Bob", "last_name": "Brigham", "phone_number": "555-0163"}, {"url": "http://localhost:8000/api/contacts/3/", "id": 3, "first_name": "Charlie", "last_name": "Campbell", "phone_number": "555-0129"}, {"url": "http://localhost:8000/api/contacts/4/", "id": 4, "first_name": "Vic", "last_name": "Vil", "phone_number": "999-3659"}, {"url": "http://localhost:8000/api/contacts/5/", "id": 5, "first_name": "chango", "last_name": "cena", "phone_number": "123-4567"}]"}
        console.log(datos);   //undefined  
 
        var template = _.template( $("#lista_template").html(), data);  //Aqui data debería ser [Object, Object, Object, Object, Object]
        this.$el.html( template );
    }
});
 

Como se puede observar, la variable data almacena:

1. o "undefined"
2. o un arreglo vacío
3. o un objeto que tiene una propiedad llamada responseText y otra responseJSON (si llamo a estas con data.responseText lo que obtengo es nuevamente "undefined")

Pero lo que yo necesito es el array de objetos que devuelve el argumento resp del método success cuando hacemos fecth() a la colección.
¿Como puedo obtener dicho array?

Desde ya muchas gracias.
Saludos

[abimex]

Lo tienes que hacer en el success del fetch porque fetch funciona de manera asíncrona.

La forma tradicional es hacer el fetch y dentro del success crear la instancia a la vista pasándole como model la colección que acabas de recibir.

Saludos!

[cristian_cena]

Hola abimex, antes que nada, muchísimas gracias por responderme, pude solucionarlo!!!

Código Javascript:

var Modelo = Backbone.Model.extend();
 
var Coleccion = Backbone.Collection.extend({
    url: '/api/contacts/', //en esta url esta la api rest 
    model: Modelo
});
        
var Vista = Backbone.View.extend({});
 
$(function(){ 
    var mycollection = new Coleccion();
 
    mycollection.fetch({
       success: function (data) { 
            console.log("success con exito");   
            var datos = new Array();
            for (var i = 0; i < data.models.length; i++) {
                datos.push(data.models[i].attributes);
            };
            var contactos = { contactos : datos }; console.log(contactos);
            var template = _.template( $("#lista_template").html(), contactos);
 
            var myview = new Vista({ el: $("#lista_container") });
            myview.$el.html( template );
       }    
    });
});
 

Código HTML:

<div id="lista_container"></div>
<script type="text/template" id="lista_template">
    <ul>
        <% _.each(contactos, function(contacto) { %>
            <li>
                <% print(contacto.first_name); %> 
            </li>
        <% }); %>
    </ul>
</script>
 

Efectivamente se imprimen los nombres de los contactos en la lista, muchas gracias!

Aunque me late que es posible mejorar este código, ojalá puedas compartirme algun consejo o enlace para estudiar
Desde ya muchas gracias nuevamente, un saludo.

[abimex]

no necesitas crear un arreglo con los atributos como hash, el metodo toJSON de la collection te da eso.

Saludos :)