Meteor: Uzyskaj pomocnika szablonu (lub zmienną) od innego pomocnika

Question

Jak mogę odwołać się do pomocnika szablonu z innego? Na przykład ...

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'; 
    } 
}); 

Próbowałem również Template.instance() .__ helpers.reusableHelper - wszystko bez powodzenia.

Czy istnieje sposób na zdefiniowanie reaktywnych zmiennych instancji szablonu?

XXX jest pod-szablonem renderującym wiele razy na tej samej stronie.

Answer 1

To podobnie jak przy użyciu wspólnego kodu, można wykonać inną funkcję javascript, która zawiera kod wielokrotnego użytku i wywołać go z dowolnego miejsca.

Podobnie jak w swojej Code

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

iw was szablon helper-

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'; 
    } 
}); 

i

Ewentualnie czy istnieje sposób zdefiniować reaktywny instancji szablonu zmienne?

można użyć Session variables lub Reactive variable

Answer 2

można, ale tylko z global template helpers.

Blaze._globalHelpers.nameOfHelper()

Oto przykład nazywając Iron:Router's pathFor globalnego pomocnika.

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) 
    } 
    } 
}); 

EDYCJA: Na twoje drugie pytanie. Możesz wywoływać ten sam szablon tyle razy, ile chcesz na stronie i przekazywać różne atrybuty danych bezpośrednio do niego: i/lub używać opakowania szablonu blokowego do iterowania danych. #each będzie wielokrotnie wywoływał szablon, podając każdorazowo inny kontekst danych.

#each Przykład

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

Atrybuty Przykład

<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 3

Zastrzeżenie: To nie może odpowiedzieć na to pytanie bezpośrednio, ale może to być pomocne dla ludzi przyklejonych z podobnym zastosowaniu Sprawa:

Czasami łatwo jest zamknąć się w "Meteorowej drodze", zapomina się o standardowych regułach JavaScriptu.

Dwa przypadki użycia, które brzmią podobnie do tego, co próbujemy zrobić:

1.Dla pomocników/zdarzeń, do których można uzyskać dostęp w dowolnym miejscu po stronie klienta, wystarczy ustawić globalnego pomocnika.

umieścić to w, powiedzmy, client/helpers.js:

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

teraz Helpers.someFunction() jest dostępna do wszystkie szablony.

Jeśli chcesz powiązać lokalnej instancji szablonu do niego z jakiegoś powodu, znowu, to standardowe JS:

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

2. Aby utworzyć wielokrotnego użytku pomocników Blaze wewnątrz szablonów, należy Template.registerHelper

na przykład, funkcja ta wykorzystuje "cyfra" bibliotekę do numerów format:

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

Można to wykorzystać w dowolny szablon tak:

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

Answer 4

Ponieważ odpowiedź ta jest obecnie brakuje - Chciałem dodać Aktualizacja

W obecnej wersji meteorów, powinieneś być w stanie wywołać :

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

należy nazwać tak, jeśli chcesz, aby upewnić się, że pomocnik ma dostęp do this:

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

Ale bądź ostrożny - może to przerwać w przyszłych wersjach Meteorów.

Answer 5

Dodawanie do odpowiedzi Nils', byłem w stanie uzyskać dostęp pomocników poziomu szablonu w imprezach stosując następujący kod:

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

Answer 6

znalazłem lepsze rozwiązanie z hakami kolekcji:

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

I staje się funkcjami this, które można używać zarówno w pomocnikach, jak i szablonach.

Answer 7

Miałem coś podobnego - miałem 2 pomocników w tym samym szablonie, który potrzebował dostępu do tej samej funkcji. jednak ta funkcja 1) wymagała dostępu do reaktywnego var w szablonie, a 2) jest funkcją filtrującą, więc nie mogłem po prostu przekazać danych tego reaktywnego var.

Skończyło się na zdefiniowaniu funkcji filtru w szablonach onCreated() i zapisaniu jej w reaktywnym var, aby pomocnicy mogli uzyskać do niej dostęp.

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 8

to tylko pojawił się ponownie w pracy, a tym razem użyliśmy modułów. w tym przypadku mieliśmy wiele dużych powiązanych funkcji, które musiały utrzymywać dane przez połączenia. Chciałem ich poza plikiem szablonu, ale nie całkowicie zanieczyszczałem zakres Meteor. więc zrobiliśmy moduł (zanieczyszczający zasięg Meteora 1x) i wywołaliśmy funkcje z tego szablonu.

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()); 
    } 
}); 

wyjście konsola jest 7, 8.