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

backbone js tutorial

Question

Frustrante, 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 renderiza una colección después de que se ha obtenido? ¿Es solo un caso de iteración a través de la colección? ¿Debería ser activado por algún evento?

• El backbone docs habla de ''bootstrapping'', que entiendo significa usar datos 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 en base a las respuestas.

EDITAR

Entonces, parece que el consenso es agregar los datos como parte del JS y procesarlos en la carga de la página.

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

En cuanto a la generació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ías 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''

Con respecto al arranque, veo en los contenidos que lees las preguntas frecuentes, y eso es exactamente lo que hice en la práctica. Utilizo ASP.Net MVC 3 para que mi vista del lado del servidor tenga algo así como (aunque normalmente no pondría ''libros'' en el espacio de nombres global):

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

Espero que sea útil.

Answer 2

En realidad, he trabajado un poco en Backbone por un tiempo, y he descubierto que los datos Bootstrapping son realmente útiles en algunos casos, cuando sabes que necesitarías esos datos TAN PRONTO como se cargue la página (reduciendo así un AJAX adicional). llamada)

En Symfony, lo hago presentando los datos requeridos 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 (), puede levantar estos datos directamente desde DOM y comenzar a hacer el trabajo como siempre:

Por ejemplo, en mi enrutador, lo 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...

Answer 3

Me encontré con la misma situación que usted, no siempre quiero que mis datos arranquen inicialmente (especialmente si es una llamada de API de un tercero). 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();
  }
};

enrutadores / 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 / items / 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;
  }
});