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

Question

我有一个流星模板：

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

但其中 none 似乎有任何效果。我能够读取 console.log(event) 但我无法在单击后提取值。

我该如何解决这个问题？

Answer 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')

Answer 2

我无法理解您要实现的目标，但随着您的代码出现，我相信您正试图在单击按钮时路由到不同的模板。如果那是你想要的，那你为什么不将路由地址保留在 '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"))
}

谢谢

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

How to handle button click events in meteor?

javascript

dom-events

meteor

meteor-blaze