¿Cómo arranco una colección en Backbone.js usando Javascript solamente?

Question

Contexto: Estoy creando una aplicación que necesita varias grandes colecciones de datos de referencia para la operación. Estoy limitado a HTML y Javascript solamente (incluido JSON).

Pregunta: ¿Cómo arranque una colección en Backbone.js donde los objetos de colección están en formato JSON en el servidor y solo estoy usando Javascript?

Esto es lo que ya sé:

• Backbone.js bootstrapping mejor práctica requiere rieles o algún otro lenguaje de servidor (http://backbonejs.org/#FAQ-bootstrap).
• La mayoría de las operaciones de I/0 de Javascript son asíncronas, como la carga de JSON desde el servidor.
• Usar fetch() para arrancar los datos se considera un antipatrón en Backbone.js. fetch() también es una operación asincrónica.

Esto es lo que he encontrado hasta el momento:

ItemList = Backbone.Collection.extend({ 
    model: Item, 
    url: 'http://localhost:8080/json/items.json' 
}); 
var itemList = new ItemList; 
itemList.fetch(); 
itemList.on('reset', function() { dqApp.trigger('itemList:reset'); }); 

'dqApp' es mi objeto de aplicación. Puedo mostrar un spinner y actualizar el estado de carga mientras se completan las colecciones enviando alertas al objeto de la aplicación.

Answer 1

esto puede ayudarle: http://ricostacruz.com/backbone-patterns/#bootstrapping_data

Answer 2

El fetch function acepta un parámetro de opciones, que puede tener un success devolución de llamada:

var itemList = new ItemList; 
itemList.fetch({success: function() { 
    dqApp.trigger('itemList:reset'); 
}}); 

Answer 3

Una posible solución es hacer que su visión depende del estado de fetch, por lo que no se creará una instancia hasta que su modelo/colección haya terminado de cargarse.

Solo tenga en cuenta que este es un antipatrón Backbone. Hacer que la vista dependa de su colección/modelo probablemente cause retrasos en la IU. Es por eso que el método recomendado es arrancar sus datos al insertar el json directamente en su página.

Pero esto no resuelve su situación, donde necesita cargar datos en una situación sin servidor. Es fácil insertar datos json en su página dinámicamente con algunas líneas de Ruby/PHP/etc, pero si está trabajando en el lado del cliente solamente, hacer que la vista dependa del modelo es el camino a seguir.

Si va a cargar la colección usando fetch(), se puede usar algo como:

var Model = Backbone.Model.extend({}); 

var Collection = Backbone.Collection.extend({ 
    model: MyModel, 
    url: 'http://localhost:8080/json/items.json' 
}); 

var View = Backbone.View.extend({ 
    //code 
}); 

var myCollection = new Collection(); 

myCollection.fetch({ 
    success: function() { 
     console.log('Model finished loading'); } 
     myView = new View(); 
    }); 

Mi forma preferida es el uso de Ajax (por ejemplo, .getJSON, .ajax) y guarde el objeto devuelto jqXHR (o XMLHTTPRequest, si no está utilizando jQuery) a una propiedad en su modelo. De esta manera, tendrá un control más granular y puede usar la respuesta deferred object para verificar el estado de la llamada antes de crear su vista.

var Model = Backbone.Model.extend({}); 

var Collection = Backbone.Collection.extend({ 
    model: Model, 
    status: {}, 
    initialize: function() { 
     var _thisCollection = this; 
     this.status = $.getJSON("mydata.json", function (data) { 
      $.each(data, function(key) { 
       var m = new Model ({ 
         "name": data[key].name, 
         "value": data[key].value, 
        }); 
       _thisCollection.add(m); 
      }); 
     }); 
    } 
}); 

var View = Backbone.View.extend({ 
    console.log("Creating view..."); 
    //code 
}); 

var myCollection = new Collection(); 
var myView = {}; 
myCollection.status 
    .done(function(){ 
     console.log("Collection successfully loaded. Creating the view"); 
     myView = new View(); 
    }) 
    .fail(function(){ 
     console.log("Error bootstrapping model"); 
    });