tutorial - Meteor: Access Template Helper(o variable) de otro ayudante

react and meteor

Question

¿Cómo puedo hacer referencia a un helper de plantilla desde otro? Por ejemplo...

Template.XXX.helpers({
    reusableHelper: function() {
        return this.field1 * 25 / 100; //or some other result
    },
    anotherHelper: function() {
        if (this.reusableHelper() > 300) //this does not work
            return this.reusableHelper() + '' is greater than 300''; 
        else
            return this.reusableHelper() + '' is smaller than 300'';
    }
});

También probé Template.instance () .__ helpers.reusableHelper, todo sin suerte.

Alternativamente, ¿hay alguna forma de definir las variables de instancia de plantilla reactivas?

XXX es una sub-plantilla que rinde varias veces en la misma página.

Answer 1

Añadiendo a la respuesta de Nils, he podido acceder a asistentes de nivel de plantilla en eventos utilizando el siguiente código:

''click a#back'': (event, instance) ->
    if instance.view.template.__helpers['' complete'']() && instance.view.template.__helpers['' changed'']()
        event.preventDefault()

Answer 2

Dado que esta respuesta falta actualmente, quería agregar una actualización

En la versión meteorológica actual, deberías poder llamar:

var TEMPLATE_NAME = //the name of your template...
var HELPER_NAME = //the name of your helper...
Template[TEMPLATE_NAME].__helpers['' ''+HELPER_NAME]

Debería llamarlo así, si quiere asegurarse de que el ayudante tenga acceso a this :

var context = this;
Template[TEMPLATE_NAME].__helpers['' ''+HELPER_NAME].call(context,/* args */);

Pero ten cuidado, esto podría romperse en futuras versiones de Meteor.

Answer 3

Encontré una mejor solución con los ganchos de la colección:

Item =  new Mongo.Collection(''Items'');
Item.helpers({
    isAuthor: function(){
        return this.authorId == Meteor.userId();
    },
    color: function(){
        if(this.isAuthor())
            return ''green'';
        else
            return ''red'';
    }
});

Entonces me convierto en funciones de this , utilizables tanto en ayudantes como en plantillas.

Answer 4

Esto, al igual que el uso del código común, puede hacer que otra función de JavaScript contenga su código reutilizable y lo llame desde donde lo requiera.

Como en tu código

function calcField(field){
   return field * 25 / 100
}

y en tu ayudante de plantilla

Template.XXX.helpers({
    reusableHelper: function() {
        return calcField(this.field1); 
    },
    anotherHelper: function() {
        if (calcField(this.field1) > 300) 
            return calcField(this.field1) + '' is greater than 300''; 
        else
            return calcField(this.field1) + '' is smaller than 300'';
    }
});

y

Alternativamente, ¿hay alguna forma de definir las variables de instancia de plantilla reactivas?

puedes usar variables de Sesión o variable Reactiva

Answer 5

Puedes hacerlo solo con ayudantes de plantillas globales .

Blaze._globalHelpers.nameOfHelper()

Aquí hay un ejemplo llamado Iron: Path de Router For global helper.

Template.ionItem.helpers({
  url: function () {
    var hash = {};
    hash.route = path;
    hash.query = this.query;
    hash.hash = this.hash;
    hash.data = this.data;
    var options = new Spacebars.kw(hash);

    if (this.url){
      return Blaze._globalHelpers.urlFor(options)
    } else if( this.path || this.route ) {
      return Blaze._globalHelpers.pathFor(options)
    }
  }
});

EDITAR: a su segunda pregunta. Puede llamar a la misma plantilla tantas veces como desee en una página y pasar diferentes atributos de datos directamente en ella y / o usar #each wrapper de plantilla de bloque para iterar sobre los datos. #each llamará a una plantilla muchas veces, dándole un contexto de datos diferente cada vez.

#each Ejemplo

<template name="listOfPosts">
  <ul>
    {{#each posts}}
      {{>postListItem}} <!--this template will get a different data context each time-->
    {{/each}}
  </ul>
</template>

Atributos Ejemplo

<template name="postDetails">
  {{>postHeader title="Hello World" headerType="main" data=someHelper}}
  {{>postHeader title="I am a sub" headerType="sub" data=newHelper}}
  {{>postBody doc=bodyHelper}}
</template>

Answer 6

Tenía algo similar: tenía 2 ayudantes en la misma plantilla que necesitaba acceso a la misma función. sin embargo, esa función 1) necesitaba acceso a una var reactiva en la plantilla, y 2) es una función de filtro, por lo que no podía simplemente pasar los datos de esa var reactiva.

Terminé definiendo la función de filtro en las plantillas onCreated () y la almacené en una var reactiva, para que los ayudantes pudieran acceder a ella.

Template.Foo.onCreated(function () {

    this.fooData = new ReactiveVar();

    function filterFoo(key) {
        var foo = Template.instance().fooData.get();
        // filter result is based on the key and the foo data
        return [true|false];
    }

    this.filterFoo = new ReactiveVar(filterFoo);

});

Template.Foo.helpers({
    helper1: function() {
        var filterFn = Template.instance().filterFoo.get();
        return CollectionA.getKeys().filter(filterFn);
    },
    helper2: function() {
        var filterFn = Template.instance().filterFoo.get();
        return CollectionB.getKeys().filter(filterFn);
    },

});

Answer 7

esto solo volvió a aparecer en el trabajo, y esta vez usamos módulos. en este caso, teníamos varias funciones grandes relacionadas que tenían que mantener los datos entre las llamadas. Los quería fuera del archivo de la plantilla, pero no contaminaba por completo el alcance Meteor. así que hicimos un módulo (contaminando el Meteor scope 1x) y llamamos a las funciones desde la plantilla.

lib / FooHelpers.js:

FooHelpers = (function () {
    var _foo;

    function setupFoo(value) {
        _foo = value;
    }

    function getFoo() {
        return _foo;
    }

    function incFoo() {
        _foo++;
    }

    return {
        setupFoo: setupFoo,
        getFoo: getFoo,
        incFoo: incFoo
    }
})();

FooTemplate.js:

Template.FooTemplate.helpers({
    testFoo: function() {
        FooHelpers.setupFoo(7);
        console.log(FooHelpers.getFoo());
        FooHelpers.incFoo();
        console.log(FooHelpers.getFoo());
    }
});

la salida de la consola es 7, 8.

Answer 8

Descargo de responsabilidad: Es posible que esto no responda su pregunta directamente, pero podría ser útil para las personas que tienen un caso de uso similar:

A veces es fácil encerrarse en el "Meteoro", que las reglas estándar de Javascript se olvidan.

Dos casos de uso que suenan similares a lo que estás tratando de hacer:

1. Para ayudantes / eventos a los que puede acceder en cualquier lugar del lado del cliente, simplemente configure un ayudante global.

Pon esto en, digamos, client/helpers.js :

Helpers = {
    someFunction: function(params) {
        /* Do something here */
    }
}

Ahora Helpers.someFunction () está disponible para todas las plantillas.

Si desea vincular la instancia de plantilla local a ella por alguna razón, de nuevo, es JS estándar:

var boundFunction = Helpers.someFunction.bind(this);

2. Para crear ayudantes Blaze reutilizables dentro de las plantillas, use Template.registerHelper

Por ejemplo, esta función usa la biblioteca "numeral" para formatear números:

Template.registerHelper(''numeral'', function(context, opt) {
    var format = (opt.hash && opt.hash.format) || ''0,0.00'';
    return numeral(context || 0).format(format);
});

Puedes usar esto en cualquier plantilla así:

{{numeral someNumberVariable format=''0,0''}}