如何处理流星中的按钮点击事件?

时间:2016-07-21 07:49:16

标签: javascript meteor javascript-events meteor-blaze

我有一个流星模板:

<template name="createDefaultTemplate">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> Select Role of router</h4>
        </div>

        <div class="btn-group btn-group-justified" id="routerType">
            <a href="{{pathFor route="edgeRouterAvailablePGTemplate"}}" id= "edge" class="btn btn-default">Edge Router</a>
            <a href="{{pathFor route="aggrRouterAvailablePGTemplate"}}" id= "agg" class="btn btn-default">Aggr. Router</a>
            <a href="{{pathFor route="coreRouterAvailablePGTemplate"}}" id= "core" class="btn btn-default">Core Router</a>
        </div>
    </div>

我正在尝试拉出单击按钮的值,以便我可以触发新路线。不幸的是,我无法做对。我已经尝试了下面的内容,但它确实从按钮中获取了值。

Template.createDefaultTemplate.events({
    'click #agg ': function(event){
        console.log(event);
        var selectValue = $(event.target).val();
        console.log(selectValue + "is selected  - message logged in events");
        Session.set("selectedSchema",selectValue);
        console.log(Session.get("selectedSchema")+ " is session variable set - message logged in events");
    }
});

我也尝试过类似的事情:

 'click' : function(event)
'click a .btn .btn-default' : function(event)

但它们似乎都没有任何效果。我能够读取console.log(事件),但点击后我无法提取值。

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

如果我非常理解你的问题。您需要为每个按钮添加值附加。您可以使用html元素的数据属性

来实现
 <div class="btn-group btn-group-justified" id="routerType">
        <a href="{{pathFor route="edgeRouterAvailablePGTemplate"}}" id= "edge" data-value="6" class="btn btn-default">Edge Router</a>
        <a href="{{pathFor route="aggrRouterAvailablePGTemplate"}}" id= "agg" data-value="65" class="btn btn-default">Aggr. Router</a>
        <a href="{{pathFor route="coreRouterAvailablePGTemplate"}}" id= "core" class="btn btn-default">Core Router</a>
    </div>

要获取模板按钮单击事件的值,您只需执行此操作即可。

    var selectValue = $(event.target).data('value')

答案 1 :(得分:0)

我无法理解你想要实现的目标,但是当你的代码出现时我相信你正试图在按钮点击时路由到不同的模板。如果那就是你想要的那么你为什么不把路由地址保存在'a'标签的'href'属性中

<a href="/edge" id= "edge" class="btn btn-default">Edge Router</a>
<a href="/aggr" id= "agg" class="btn btn-default">Aggr. Router</a>
<a href="/core" id= "core" class="btn btn-default">Core Router</a>

我相信您已经为点击的按钮创建了路由,因此根据hrefs对路由器进行少量修改。

我认为应该有效

如果你仍然希望在点击按钮时访问href的值,你可以这样做:

"click .btn":function(e,t){
  console.log($(e.target).attr("href"))
}

由于