【问题标题】:Meteor.js: How to retrieve data attribute of parent element of an event object?Meteor.js:如何检索事件对象的父元素的数据属性?
【发布时间】:2015-01-29 06:18:33
【问题描述】:

我想制定某种互动式周计划。我使用 html 表格来显示计划。每个表格行对应于一周中的一天,而每个表格单元格代表一天中的某个部分(例如“早上”、“中午”等)。该表在模板部分中呈现。为了与表的每个字段进行交互,我将数据属性绑定到每个 .为了防止冗余,我想将相应的日期绑定到表格行的数据属性,而不是绑定到每个表格单元格。 我的问题是,在该模板的事件处理程序中,如果单击了表格单元格,我如何访问相应父表格行的数据属性?

week-plan.html 看起来像

<template name="weekPlan">
...
<tbody>
  {{#each daysOfWeek}}
    {{> dayDataRow weekDay=day weekDayDate=date}}
  {{/each}}
</tbody>
...
</template>

day-data-row.html 看起来像

<template name="dayDataRow">
  <tr class="week-plan--date" data-date="{{weekDayDate}}">
    <td class="week-plan--day">{{weekDay}}</td>
    <td class="week-plan--item" data-my-data="morning"></td> 
    <td class="week-plan--item" data-my-data="noon"></td>
    <td class="week-plan--item" data-my-data="afternoon"></td>
    <td class="week-plan--item" data-my-data="evening"></td>
    <td class="week-plan--item" data-my-data="night"></td>
  </tr>
</template>

week-plan.js 看起来像:

Template.weekPlan.helpers({
  daysOfWeek: function(){
    var today = new Date();
    var firstOfWeek = today.getDate() - today.getDay() + 1;
    var weekDays =  ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
    weekArray = new Array();
    var row = 0;
    for (row; row < 7; row++){
      var date = new Date(today.setDate(firstOfWeek + row));
      var day = weekDays[date.getDay()];
      weekArray[row] = {'date': date.yyyymmdd(), 'day': day};
    };
    return weekArray;
  }
});

Template.weekPlan.events({
  'click .week-plan--item': function(event, template){
    console.log('Part of day: ' + event.target.dataset.myData);
    // I'm looking for something like...
    console.log('Date of day: ' + event.target.parent.dataset.date);
  }
});

非常感谢任何帮助。

【问题讨论】:

    标签: javascript meteor event-handling custom-data-attribute


    【解决方案1】:

    这应该可行:

    console.log('Date of day: '
         + $(event.currentTarget).parent('.week-plan--date').data('date'));
    

    【讨论】:

    • 太好了,做到了:)!谢谢,伙计!
    猜你喜欢
    • 2020-09-05
    • 1970-01-01
    • 2012-10-08
    • 1970-01-01
    • 2017-05-18
    • 1970-01-01
    • 2011-05-30
    • 1970-01-01
    • 2020-03-08
    相关资源
    最近更新 更多