Meteor: обнаружение события во вложенном шаблоне

Question

Новичок метеоритного вопроса ...

У меня есть код смутно похожее на это:

<template name="fancy-button"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="very-fancy" value="Click Me!" /> 
</template> 

<template name="homepage"> 
    {{> fancy-button}} 
    // here, I want the button to bring up my "stats" page (go, iron-router, go) 
</template> 

<template name="stats-page"> 
    {{> fancy-button}} 
    // here, I want the button to show an alert 
</template> 

Вопрос: в «домашней странице» и «статс-странице », есть ли способ узнать, нажал ли пользователь кнопку« причудливая кнопка »?

(? Или это просто неправильный способ реализовать вещи в метеора)

Answer 1

Примечание: Ответ ниже поможет вам кнопку рабочего переключателя, и один общий статус переключения. Если вам нужна кнопка, чтобы делать разные вещи или менять разные логические кнопки, в зависимости от контекста, тогда есть больше работы. Возможно, это возможно.

Вложенность, используемая на дисплее, не влияет на внутреннее представление шаблонов. Все шаблоны в Meteor get определены в объекте Template как Template.someTemplateName. Каждый шаблон представляет собой объект JS, содержащий поля данных, функции и обработчики событий.

По этой причине dashes in template names are forbidden.

Поскольку метеорит использует имя шаблона в объекте Javascript как имя свойства, поэтому имена шаблонов должны соответствовать соглашениям/ограничениям именования Javascript. В частности, тир выглядит как минус в результирующем коде:

Template.fancy-button.events

и не будет работать. Javascript читает, что как Template.fancy минус button.events, а не как обработчик событий для шаблона модной кнопки.

Что касается Java-совместимых имен, http://javascript.crockford.com/code.html предлагает:

Имена должны быть сформированы из 26 верхних и нижнего регистра букв (A .. Z, A .. Z) 10 цифр (0 .. 9) и _ (underbar) ...

Другое соглашение Javascript - это camelCase, где каждому слову в имени после первого слова присваивается заглавная буква. Я полагаю, это вместо тире, чтобы изменить код следующим образом:

<template name="fancyButton"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="veryFancy" value="Click Me!" /> 
</template> 

<template name="homePage"> 
    {{> fancyButton}} 
    // here, I want the button to bring up my "stats" page (go, iron-router, go) 
    {{ #if veryFancyStatus }} 
    {{ > statsPage }} 
    {{ /if }} 
</template> 

<template name="statsPage"> 
    {{> fancyButton}} 
    // here, I want the button to show an alert page 
    {{ #if veryFancyStatus }} 
    {{ > alertPage }} 
    {{ /if }} 
</template> 

Метеор способ установить обработчик щелчка, чтобы использовать event maps

Кроме того, вы, вероятно, хотите быть использовать helper to make it easier to use session variables in a template

Вот как реализовать переключатель:

client.js (непроверенные)

// initialize veryFancyStatus to 0 
Session.set("veryFancyStatus",0) 
// register veryFancyStatus so we can read it in every template 
Handlebars.registerHelper('veryFancyStatus',function(input){ 
    return Session.get("veryFancyStatus"); 
}); 
// set up an event handler so that any time a .veryFancy class element is clicked 
// a function is called to toggle the session variable veryFancyStatus 
// this should also trigger redraws in templates that are conditional on veryFancyStatus 
Template.fancyButton.events({ 
    'click .veryFancy': function() { 
    Session.set("veryFancyStatus", +(!(Session.get("veryFancyStatus"))); 
    } 
}); 

Answer 2

Большое спасибо, @paul!Я пошел с чем-то вроде этого:

<template name="fancyButton"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="veryFancy" value="Click Me!" /> 
</template> 

<template name="homePage"> 
    {{> fancyButton}} 
    {{respondToFancyButton}} 
    <!-- here, I want the button to bring up my "stats" page (go, iron-router, go) --> 
</template> 

<template name="statsPage"> 
    {{> fancyButton}} 
    {{respondToFancyButton}} 
    <!-- here, I want the button to show an alert --> 
</template> 

Затем, на моем JavaScript коде клиента:

Session.set("fancyButtonMonitor", 0); 

Template.fancyButton.events({ 
    'click .veryFancy': function(theEvent, theTemplate) { 
     Session.set("fancyButtonMonitor", 1); 
    } 
}); 

Template.homepage.respondToFancyButton = function() { 
    if (Session.get("fancyButtonMonitor") == 1) { 
     Session.set("fancyButtonMonitor", 0); 
     Router.go('stats'); 
    } 
    return null; 
}; 

Template.statsPage.respondToFancyButton = function() { 
    if (Session.get("fancyButtonMonitor") == 1) { 
     Session.set("fancyButtonMonitor", 0); 
     Router.go('alert'); 
    } 
    return null; 
};