处理不同模板之间的事件

Question

我在模板 B 中有一个模板 A。当点击模板 B 中的按钮 B 时，模板 A 中的按钮 A 应该改变颜色。

我正在使用 Session get/set 来更改变量，以便我可以更改颜色。

这是我的代码：

 Session.set('monitor',0);


    Template.B.events({ 
         'click #buttonB' :function(event){
              Session.set('monitor',1);
          }
         return FlowRouter.go('/templateC');
    })

/*NOT WORKING */
    Template.A.helpers({
         randomlyNamed: function(){
          if (Session.get('monitor') == 1){
              document.getElementById("buttonA").style.background = "red";

          }
        Session.set('monitor',0);
    } 
    })

问题：当按钮 B 被点击时，会话可以设置为 1。问题是我不确定将更改颜色代码放在模板 A 中的哪个位置。

Answer 1

您可以在帮助程序中设置样式并在模板中引用它。

html（在模板 A 中）：

<button id="buttonA" style="background-color: {{btnColor}}">

js:

Template.A.helpers({
  btnColor(){ return (Session.get('monitor') == 1)? "red" : "black"; }
})

这里black 是另一种颜色，但它可以是任何颜色。