Backbone.js: representación de colecciones en aplicaciones del mundo real

Question

Sorprendentemente, la mayoría de los ejemplos 'tutoriales' de aplicaciones backbone.js asumen una lista de modelos limpia. Es decir. que las colecciones del modelo estén vacías inicialmente, hasta que el usuario agregue un artículo. Por supuesto, este no es el caso en una aplicación del mundo real, donde normalmente tienes una colección existente para comenzar desde la tienda de back-end.

Me gustaría saber cómo las personas manejan las colecciones existentes en la red troncal. Específicamente:

• ¿Cómo se procesa una colección después de que haya sido fetch ed? ¿Es solo un caso de iteración a través de la colección? ¿Debería ser activado por algún evento?

• El backbone habla de 'bootstrapping', lo cual entiendo significa usar datos que están disponibles en la carga inicial (esto también tiene sentido desde un punto de vista SEO). Pero, ¿cómo funciona esto en la práctica? ¿Los datos se vuelcan en JS en el lado del servidor? O el JS examina el DOM?

Siento que esta es una pregunta pobre, pero espero expandirla basándome en las respuestas.

EDITAR

por lo que parece que el consenso es agregar los datos como parte de la JS y un proceso que en la página de carga.

Una gran desventaja que veo con esta técnica es que la información no está disponible para las arañas de los motores de búsqueda. Desde esa perspectiva, podría ser mejor extraerlo del DOM (aunque no he visto a nadie hacerlo de esa manera). ¿O tal vez agregar el lado del servidor HTML y pegar los datos en el JS?

Answer 1

Me encontré con la misma situación que usted, no siempre quiero que mis datos arranquen inicialmente (especialmente si es de una llamada de API de terceros). No he encontrado ningún tutorial que lo haga, pero revisar la documentación es bastante fácil. Solo tiene que vincular el evento 'reiniciar' (este se activa cuando se repobla la colección completa) en su colección y procesamiento. Aquí hay un ejemplo rápido:

my_application.js

window.MyApplication = { 
    Models: {}, 
    Collections: {}, 
    Views: {}, 
    Routers: {}, 
    init: function() { 
    // Start the data loading 
    this.someItems = new MyApplication.Collections.Items(); 
    this.someItems.fetch(); 

    // Start rendering the UI before the data is ready 
    new MyApplication.Routers.Items(this.someItems); 
    Backbone.history.start(); 
    } 
}; 

routers/items_router.js

MyApplication.Routers.Items = Backbone.Router.extend({ 
    routes: { 
    "" : "index" 
    }, 

    initialize: function(collection) { 
    this.collection = collection; 
    }, 

    index: function() { 
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection }); 
    $('.items').html(view.render().el); 
    } 
}); 

views/artículos/items_index.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({ 
    initialize: function() { 
    _.bindAll(this, "render"); 

    // Once the collection is fetched re-render the view 
    this.collection.bind("reset", this.render); 
    }, 

    render: function() { 
    console.log(this.collection.length); 
    // Render content 
    return this; 
    } 
}); 

Answer 2

En cuanto a la representación de colecciones, sí, normalmente iterar sobre una colección y crear una vista secundaria para cada uno de los modelos. Aquí hay un enlace que podría ser útil en ese http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

¿Cuándo debería renderizarlo? Bueno, esa es una respuesta difícil, pero no diría que es en respuesta a un evento en particular. Una cosa que me gusta es que tenemos una vista principal que representa vistas secundarias que representan otras vistas secundarias. Como una convención, no se procesa directamente en el DOM, pero una vez que se renderizan todas las sub-vistas, agregamos la vista principal al DOM y se muestra toda la página inmediatamente. Esto evita el "flash de contenido sin estilo"

En cuanto al arranque, veo en los contenidos que ha leído las Preguntas frecuentes, y eso es precisamente lo que he hecho en la práctica. Puedo utilizar ASP.Net MVC 3 por lo que mi lado del servidor vista renderizada tendría algo así como (aunque yo no pondría 'libros' en el espacio de nombres global normalmente):

<script type="text/javascript"> 
    books = new BooksCollection(); 
    books.reset(@Html.ToJson(Model)); 
</script> 

espero que sea útil.

Answer 3

En realidad, he hecho algunos trabajos en la columna vertebral de un rato , y he descubierto que los datos Bootstrapping son realmente útiles en algunos casos, cuando sabes que necesitarías esos datos TAN PRONTO como la página cargue (t Hus reducir una llamada adicional AJAX)

En Symfony, lo hago por la prestación de los datos necesarios de esta manera:

<script type="text/template" id="__user-boostrap"> 
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %} 
    // for example in symfony2, I do: 
    {% render "myBundle:Core:getUser" %} 
</script> 

Ahora, en la función initialize(), que puede levantar estos datos directamente de DOM , y empezar a hacer el trabajo como de costumbre:

Por ejemplo, en mi router, hago

myApp.Router = Backbone.Router.extend({ 
    var data = JSON.parse($('__user-bootstrap').html()); 
    var __games = new myApp.Games(); 
    __games.reset(__games.parse(data.games)); 
    var gameList = new myApp.GameListView({ collection: __games }); 
    $(this.gameView).html(gameList.$el); 
}); 

Espero que esto ayude ...