Meteor, wywołanie funkcji w szablonie dziecko od nadrzędnego szablonu

Jeśli mam szablon nadrzędny Container z szablonu dziecięcej Content avec tylko przycisk:Meteor, wywołanie funkcji w szablonie dziecko od nadrzędnego szablonu

<head> 
    <title>test</title> 
</head> 

<body> 
    {{> Container}} 
</body> 

<template name="Container"> 
    {{# Content callback = callBack }} 
     <button>ok</button> 
    {{/Content}} 
</template> 

<template name="Content"> 
    {{> UI.contentBlock}} 
</template>

Jeśli można przekazać funkcję do callback. W ten sposób:

Template.Container.helpers({ 
    callBack: function() { 
     return function() { 
      console.log('this is my callback'); 
     } 
    } 
});

Tak więc w moim szablonie treści mogę wywoływać funkcję z mojego szablonu nadrzędnego. Na przykład:

Template.Content.events({ 
    'click button': function (e, tmpl) { 
     tmpl.data.callback(); 
    } 
});

Ale czasami muszę zrobić to w inny sposób. Rodzic wywołujący funkcję w swoim dziecku. Jaki jest twój sposób robienia tego?

EDIT:

Uratowałem go w meteorpad aby zobaczyć go w akcji i ułatwiają widelcu: http://meteorpad.com/pad/48NvCFExxW5roB34N/test-pass-callback-to-parent

Źródło

2014-12-01 fabien

Oto wzór, którego można użyć. Zdefiniuj klasę Child i szablon child; Chodzi o to, że wewnątrz szablonu child kontekst danych jest instancją Child. Na przykład utworzę komponent, który ma numer, który można zwiększyć, naciskając przycisk.

<template name="child"> 
    <button class="increment">{{number.get}}</button> 
</template>

function Child() { 
    this.number = new ReactiveVar(0); 
} 

Template.child.events({ 
    "click .increment": function() { 
    this.number.set(this.number.get() + 1); 
    } 
});

W rodzica created zwrotnego, należy utworzyć instancję Child i przechowywać je na przykład szablonu.Następnie w szablonie dominującej, wołać do child, przekazując Child jako kontekst danych:

Template.parent.created = function() { 
    this.childInstance = new Child(); 
} 

Template.parent.helpers({ 
    childInstance: function() { 
    return Template.instance().childInstance; 
    } 
});

<template name="parent"> 
    {{> child childInstance}} 
</template>

Teraz można definiować metody na prototypie Child i nazywają je z szablonu nadrzędnej, na przykład:

Child.prototype.getNumberTimesTwo = function() { 
    return this.number.get() * 2; 
}

<template name="parent"> 
    {{> child childInstance}} 
    That number multiplied by two is: {{childInstance.getNumberTimesTwo}} 
</template>

Źródło

2014-12-02 09:19:30 user3374348

Użyłem emiter zdarzeń (https://github.com/Olical/EventEmitter) do komunikacji między szablonami wcześniej, przekazujesz emitera zdarzeń do szablonu podrzędnego, podobnie jak powyżej, działa całkiem dobrze. Szablon podrzędny może również emitować zdarzenia, które mają być odbierane przez szablon nadrzędny. – nephets

Na podstawie mojego doświadczenia z Meteor, wydaje się, że sprzyja więcej projektu opartego na zdarzeniach interfejsu użytkownika. Oznacza to, że nie można bezpośrednio wywoływać metod rodzica lub potomka bezpośrednio, ale można wywołać zdarzenie niestandardowe lub ustawić zmienną Session. Więc można zrobić coś takiego:

Template.Container.helpers({ 
    callBack: function() { 
     Session.get('button.lastClickTime'); 
     console.log('this is my callback'); 
    } 
}); 
Template.Content.events({ 
    'click button': function (e, tmpl) { 
     Session.set('buttom.lastClickTime', new Date()); 
    } 
});

Celem sesji jest reaktywny dlatego metoda zwrotna zostanie wywołana w dowolnym momencie, że „button.lastClickTime” wartość sesja jest ustawiona.

Następnie można po prostu odwrócić wywołania set/get, aby powiadomić dziecko od rodzica.

Źródło

2014-12-01 17:04:09 desposi1

można zarejestrować obsługi zdarzeń na szablonu nadrzędnego, który wyzwala się na wydarzeniach w szablonie dziecięcej za pomocą selektora, który pasuje do elementów w szablonie dziecka, tak:

Template.Container.events({ // 'Container' is the parent template 
    'click button': function (e, tmpl) { // Selector for an element in the child-template* 
     // You will now have access to the parent's context instead of the child's here. 
    } 
});

*) Zakładając, że nie ma inne przyciski w szablonie nadrzędnym. Jeśli tak, zrób unikalną nazwę przycisku, aby móc jednoznacznie wybrać go z rodzica.

Źródło

2014-12-01 17:11:16

To może pracować w innym przypadku. Ale w moim "Treść" jest składnikiem i pojawi się wiele razy w szablonie nadrzędnym. Celem jest uzyskanie dostępu do kontekstu podrzędnego z rodzica, a nie uzyskanie dostępu do rodzica z dziecka. – fabien

Meteor, wywołanie funkcji w szablonie dziecko od nadrzędnego szablonu

Odpowiedz

Powiązane problemy