【问题标题】:Meteor Template events, how to get object that caused event?流星模板事件,如何获取导致事件的对象?
【发布时间】:2016-10-09 06:35:41
【问题描述】:

我有一些类似于以下的代码:

在 myapp.html 中

<template name="problems">
    <div class="problems">
        {{#each problems}}
            {{> problem}}
    {{/each}}
    </div>
</template

<template name="problem">
    <div class="problem">
        <div class="problem-text" id={{_id}}>{{text}}</div>
    </div>
</template> 

在 myapp.js 中

Template.problem.events = {
'click .problem-text' : function () {

        var user_id = Session.get('user_id');

        // how to get problem_id of clicked item?
        Router.gotoProblem(user_id, problem_id);    
    }
};

在这种情况下,我想获取匹配的 .problem-text 并被点击的 id。

我想知道产生事件的“对象”?我该怎么做呢?

【问题讨论】:

  • 每个 Meteor 文档,它们在 'this' 对象中接收当前模板数据。

标签: meteor


【解决方案1】:

此问题的选定答案只会得到 _id ,如果在模板中使用 _id 也是如此。

所以更好地使用,event.target,这将给出 COMPLETE 对象。所以它可以与 jQuery 或 MooTools 一起使用。

Template.top_nav.events({
'mousedown, .nav li a': function(evt){
  console.log('the class of object that was clicked is ' + $(evt.target).attr("class"));
 }
})

【讨论】:

  • 只是为了防止一些错误。请注意,使用 event.target 将为您提供单击的元素,因此在此示例中,它可以返回作为链接上的子元素的 span。使用 event.currentTarget 接收您正在收听的元素。
【解决方案2】:

试试这个:

Template.problem.events = {
'click .problem-text' : function () {

        var user_id = Session.get('user_id');

        // how to get problem_id of clicked item?
        Router.gotoProblem(user_id, this._id);    
    }
};

【讨论】:

    【解决方案3】:

    您可以通过 this 引用访问问题对象:

    Template.problem.events = {
        /**
         * Handles problem text click.
         * @param {jQuery.Event} event
         */
        'click .problem-text' : function (event) {
          /*
          Here this is a reference to the problem object
          and you have jQuery.Event object as the event argument.
           */
          console.log(this, arguments);
    
          var user_id = Session.get('user_id');
          var problem = this;
    
          // how to get problem_id of clicked item?
          Router.gotoProblem(user_id, /** problem_id */problem._id);
        }
      };
    

    【讨论】:

    • 我投了赞成票,因为这是真正的答案。将会话用于此类事情是一种技巧。
    • 不确定,“this”引用将为您提供帮助器检索到的对象中的数据。我认为这个问题与如何获取 html 对象更相关。在这种情况下,“event.target”是正确的方法。但是,很好地考虑这两种方法。当你想从反应数据重新渲染时,有时会使用“会话黑客”。
    猜你喜欢
    • 2015-05-07
    • 1970-01-01
    • 2014-10-16
    • 1970-01-01
    • 2015-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多