Meteor Iron Router con waitOn personalizado

iron-router

Question

Me preguntaba si alguien ha construido su propia función waitOn. No estoy usando suscribirse para manejar el waitOn, sino que quiero esperar en un helper para activar el estado listo, algo como esto:

this.route(''edit_Record'', {
    path: ''/record/edit/:_id'',
    waitOn: function() {
            return XXXXX;
        }
    });

Template.edit_Record.helpers({
    selectedRecord: function () {
        wait(3000);
        var x = myRecords.findOne({_id: this.editid});
        //XXXXX  This is where I want to set ''ready''
        return x;
    }
});

Answer 1

Diseñé mi propio patrón para trabajar con un waitOn personalizado. Debe tener en cuenta que IronRouter no renderizará su plantilla (y, por lo tanto, ninguno de sus ayudantes, excepto si los llama manualmente, lo que generalmente es impar) A MENOS que todos los identificadores especificados en la función waitOn estén listos.

waitOn es un cálculo reactivo, por lo que los identificadores que especifique deben ser fuentes de datos reactivos, y cuando su estado de listo evolucione, waitOn se volverá a evaluar automáticamente y, en última instancia, notificará a IronRouter que está bien renderizar la plantilla.

Entonces, si queremos usar waitOn con algo más que los identificadores de suscripción, tenemos que implementar nuestro propio objeto con un método reactivo ready () (esto es de los documentos). Llamaremos a este objeto "Camarero" porque su función es esperar hasta que ocurra algún evento y luego establece su estado interno en listo.

Le presentaré un ejemplo simple que resuelve un problema común: precarga de imágenes. Supongamos que tiene una plantilla que representa elementos de imagen cuyos atributos src están almacenados en una Colección: le gustaría representar la plantilla solo cuando las imágenes se cargan en el lado del cliente.

<template name="view">
    <div>
        <h1>{{title}}</h1>
        <img src="{{firstImageUrl}}" />
        <img src="{{secondImageUrl}}" />
    </div>
</template>

Se me ocurrió la siguiente interfaz:

this.route("view",{
    path:"/view/:_id",
    loadingTemplate:"loadingTemplate",
    template:"view",
    // our Waiter object handle designed to wait until images are loaded
    imagePreloadingWaiter:new ImagePreloadingWaiter(),
    // load is called only once each time the route is triggered
    load:function(){
        // reset our waiter
        this.imagePreloadingWaiter.reset();
    },
    // before : reactive computation that will be rerun until the route template is rendered
    before:function(){
        // setup collection subscription
        var subscriptionHandle=this.subscribe("collectionById",this.params._id);
        if(subscriptionHandle.ready()){
            // get the route data context
            var collection=this.data();
            // collect the images URLs we want to preload
            var params={
                images:[
                    collection.firstImageUrl,
                    collection.secondImageUrl
                ]
            };
            // fire the preloader
            this.imagePreloadingWaiter.fire(params);
        }
    },
    // we specify that we want to wait on our ImagePreloadingWaiter handle
    waitOn:function(){
        return this.imagePreloadingWaiter;
    },
    // return the data context used by this route
    data:function(){
        return Collection.findOne(this.params._id);
    }
});

Al usar esta definición de ruta, mostramos la plantilla de carga hasta que finalmente se carguen las URL de las imágenes almacenadas en nuestra colección, gracias al método waitOn que espera en nuestro identificador de la interfaz ImagePreloadingWaiter.

Ok, ahora que tenemos una visión general de la interfaz que nos gustaría usar, impleméntela de hecho:

// Simple interface to use with the IronRouter waitOn method
Waiter=function(){
    // avoid firing the waiter multiple time in a Deps.Computation context
    this.isFired=false;
    // reactive data source : have we been waiting long enough ?
    this.isReady=false;
    this.dependency=new Deps.Dependency();
};

_.extend(Waiter.prototype,{
    // reset method, clear the waiter state
    reset:function(){
        this.isFired=false;
        //
        this.isReady=false;
        this.dependency.changed();
    },
    // reactive ready method : this is the interface needed by waitOn
    ready:function(){
        this.dependency.depend();
        return this.isReady;
    },
    // fire the Waiter object only once before being resetted
    fire:function(params){
        if(!this.isFired){
            this.isFired=true;
            // this abstract method must be overloaded in child classes
            this.wait(params);
        }
    },
    // must be called in Waiter.wait() to acknowledge we''re done waiting
    waitedEnough:function(){
        // if we have reset the Waiter meanwhile, silently discard the notification
        if(this.isFired){
            this.isReady=true;
            this.dependency.changed();
        }
    }
});

// Simple waiter that simply waits N seconds before getting ready
TimeoutWaiter=function(){
    Waiter.call(this);
};
TimeoutWaiter.prototype=Object.create(Waiter.prototype);

_.extend(TimeoutWaiter.prototype,{
    wait:function(params){
        var self=this;
        // after N seconds, notify that we are done waiting
        Meteor.setTimeout(function(){
            self.waitedEnough();
        },params.seconds*1000);
    }
});

// Image preloader for the IronRouter
ImagePreloadingWaiter=function(){
    Waiter.call(this);
};
ImagePreloadingWaiter.prototype=Object.create(Waiter.prototype);

_.extend(ImagePreloadingWaiter.prototype,{
    wait:function(params){
        var self=this;
        //
        if(images.length>0){
            var imageLoadedCounter=0;
            _.each(images,function(imageUrl){
                function onImageLoadOrError(){
                    imageLoadedCounter++;
                    if(imageLoadedCounter==images.length){
                        self.waitedEnough();
                    }
                }
                //
                var image=$("<img/>");
                image.load(onImageLoadOrError);
                image.error(onImageLoadOrError);
                image.prop("src",imageUrl);
            });
        }
        else{
            self.waitedEnough();
        }
    }
});

Con este ejemplo, estoy seguro de que encontrarás una buena solución para responder a tu pregunta.

En particular, creo que es posible que desee mover su código lógico "auxiliar" dentro del enlace antes de IronRouter. No dude en hacer preguntas si mi código no está claro.

Answer 2

Podría usar algo sin ironRouter, es decir, en su plantilla. Suponiendo que tiene una plantilla llamada ''carga'' y está usando un diseño llamado ''diseño'' configurado con ironrouter

HTML

<template name="layout">
    {{#if isready}}
      {{yield}}
    {{else}}
     {{>loading}}
    {{/if
</template>

Javascript (lado del cliente)

Template.layout.isready = function() {
   return !Session.get("isnotready");
}

Template.edit_Record.helpers({
    selectedRecord: function () {
        Session.set("isnotready", true);
        wait(3000);
        var x = myRecords.findOne({_id: this.editid});
        Session.set("isnotready, false);
        return x;
    }
});