Marioneta de Backbone: usando emptyView para cargar

Estoy usando Backbone Marionettes CollectionView. Intento indicar que la colección se está cargando, todo lo que estoy haciendo es usar emptyView para mostrar un cargador.

Sin embargo, esta es una mala lógica, porque a veces las collections están vacías y, por lo tanto, se convierte en un cargador roto.

Intenté usar este script pero no funcionó: https://github.com/surevine/marionette-loadingview-plugin

¿Alguien tiene una solución mejor? Aquí está mi código actual:

//loadingview define(["marionette", "text!app/templates/loading.html"], function(Marionette, Template) { "use strict"; return Backbone.Marionette.ItemView.extend({ template: Template }); }) //collection define(["marionette", "text!app/templates/events/collection.html", "app/collections/events", "app/views/events/item", 'app/views/loading'], function (Marionette, Template, Collection, Row, LoadingView) { "use strict" return Backbone.Marionette.CompositeView.extend({ template: Template, itemView: Row, itemViewContainer: "ul", emptyView: LoadingView, initialize: function () { this.collection = new Collection() return this.collection.fetch() } }) }) //item define(["marionette", "text!app/templates/events/item.html"], function(Marionette, Template) { "use strict"; return Backbone.Marionette.ItemView.extend({ template: Template, tagName: "li" }) }) 

2 Solutions collect form web for “Marioneta de Backbone: usando emptyView para cargar”

Lo que suelo hacer es escuchar los events de "request" y "synchronization" de la Colección / Modelo. Algo como esto:

 var View = Backbone.Marionette.CompositeView.extend({ template: Template, itemView: Row, itemViewContainer: "ul", collectionEvents: { 'request': 'showLoading', 'sync': 'hideLoading' }, initialize: function () { this.collection = new Collection(); return this.collection.fetch(); } showLoading: function() { this.$el.addClass('loading'); }, hideLoading: function() { this.$el.removeClass('loading'); } }); 

Simplemente puede proporcionar un poco de HTML estático en el elemento donde planea mostrar su vista. El contenido estático se mostrará en la carga de la página y cuando el model devuelva datos, mostrará la vista y sobrescribirá el contenido estático.

Mira este jsFiddle que lo demuestra. El contenido estático solo dice "Cargando …" pero por supuesto puedes hacerlo tan elegante como quieras con los gifs de spinner y todo. http://jsfiddle.net/tonicboy/5dMjD/6/

HTML:

 <header> <h1>A Marionette Playground</h1> </header> <article id="main">LOADING...</article> <script type="text/html" id="sample-template"> Store name: <span> <%= venue.name %> </span>. </script> 

Código:

 // Define the app and a region to show content // ------------------------------------------- var App = new Marionette.Application(); App.addRegions({ "mainRegion": "#main" }); // Create a module to contain some functionality // --------------------------------------------- App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) { // Define a view to show // --------------------- var MainView = Marionette.ItemView.extend({ template: "#sample-template" }); // Move this to outside the Controller // as this gives access to other Views // Otherwise you would have to declare a New Model inside every controller var Book = Backbone.Model.extend({ url: 'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130808', toJSON: function () { return _.clone(this.attributes.response); } }) // Define a controller to run this module // -------------------------------------- var Controller = Marionette.Controller.extend({ initialize: function (options) { this.region = options.region; this.model = options.model; // Listen to the change event and trigger the method // I would prefer this as this is a cleaner way of binding and // handling events this.listenTo(this.model, 'change', this.renderRegion); }, show: function () { this.model.fetch(); }, renderRegion: function () { var view = new MainView({ el: $("#main"), model: this.model }); this.region.attachView(view); this.region.show(view); } }); // Initialize this module when the app starts // ------------------------------------------ Mod.addInitializer(function () { // I would create the model here and pass it to the controller var myBook = new Book(); Mod.controller = new Controller({ region: App.mainRegion, model: myBook }); Mod.controller.show(); }); }); // Start the app // ------------- App.start(); 
  • Backbone.js `model.destroy ()` transiciones personalizadas?
  • Especifique el elemento <tbody> de una tabla HTML como una región en Marionette for Backbone.js
  • La mejor práctica para almacenar en caching una vista de marioneta
  • Prueba de un clic de activación desde un Backbone.View que abre un nuevo Backbone.View
  • Mostrar, ocultar y luego volver a mostrar Layouts breaks Eventos
  • Cómo adjuntar controller de events en forms de networking troncal
  • Renderizar una región de Marionetas después de que se ha obtenido el model
  • Backbone.Radio: ¿cuál es la ventaja de los commands y requestes sobre events
  • Cómo agregar una opción de eliminación personalizada para las filas de la cuadrícula
  • Estrategia de cambio de Marionette Layout
  • Plantilla dos models en una vista - Backbone / Marionette
  • Seguridad de objects en Parse con la API de JavaScript: vincular usuarios a los objects guardados
  • Cómo representar más fácilmente tanto el text i18n como los attributes del model (usando la plantilla de manubrios) en Backbone.Marionette View
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.