如何获取selectedItem并同时处理按钮单击事件?

时间:2013-01-25 18:18:23

标签: meteor

不是首先选择项目然后使用按钮对所选项目执行某些操作,而是我希望用户执行一次单击。

它似乎有效,但我担心按钮上的事件必须在carpool_event上的事件之后发生。这似乎不对。有没有更好的方法来处理这个?谢谢!

在我的HTML

<template name="carpool_list">
  <h1>Carpool</h1>
  {{#each carpool_events}}
  <ul>
    {{> carpool_event}}
  </ul>
  {{else}}
    No events yet.
  {{/each}}
</template>

<template name="carpool_event">
  <div class="carpool_event">
    <span class="localDate">{{localDate}}</span>
    <span class="owner">{{owner}}</span>
    {{#if currentUser}}
      <span><input type="button" class="takeEvent" value="Take Event"/></span>
    {{/if}}
  </div>
</template>

对应的js

Template.carpool_event.events({
    'click': function () {
      Session.set("selected_carpool_event", this._id);
    }
  });

Template.carpool_list.events({
    /**
     * Take Event Handler
     */
    'click .takeEvent': function () {
      console.log("Take event:"+Session.get("selected_carpool_event"));
    }
});

1 个答案:

答案 0 :(得分:2)

你可以试试这个:

Template.carpool_event.events({
"click": function () {
      Session.set("selected_carpool_event", this._id);
      if($(event.target).attr("class") == "takeEvent" && Meteor.userId) {
         console.log("Take event:"+this._id);
      }
    }
});

或者如果您出于某些其他原因想要同时进行两次点击,或者您可以避免捕获第一次点击,您可以直接定位按钮,this._id也可以处理按钮(您可以将处理程序分配给同一模板carpool_event用于模板内任何位置的按钮)

Template.carpool_event.events({
    /**
     * Take Event Handler
     */
    "click .takeEvent": function () {
       Session.set("selected_carpool_event", this._id);
       if(Meteor.userId) {
           console.log("Take event:"+this._id);
       }
    }
});