Meteor.js: 如何获取事件对象父元素的数据属性?
Meteor.js: How to retrieve data attribute of parent element of an event object?
我想制定某种互动周计划。我使用 html table 来显示计划。每个 table 行对应一周中的一天,而每个 table 单元格代表一天中的某个部分(例如 'morning'、'noon' e.t.c。) . table 在模板部分呈现。为了与 table 的每个字段交互,我将数据属性绑定到每个 .为了防止冗余,我想将相应的日期绑定到 table 行的数据属性,而不是绑定到每个 table 单元格。
我的问题是,在该模板的事件处理程序中,如果单击 table 单元格,我如何访问相应父 table 行的数据属性?
周-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>
周-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);
}
});
非常感谢任何帮助。
这应该有效:
console.log('Date of day: '
+ $(event.currentTarget).parent('.week-plan--date').data('date'));
我想制定某种互动周计划。我使用 html table 来显示计划。每个 table 行对应一周中的一天,而每个 table 单元格代表一天中的某个部分(例如 'morning'、'noon' e.t.c。) . table 在模板部分呈现。为了与 table 的每个字段交互,我将数据属性绑定到每个 .为了防止冗余,我想将相应的日期绑定到 table 行的数据属性,而不是绑定到每个 table 单元格。 我的问题是,在该模板的事件处理程序中,如果单击 table 单元格,我如何访问相应父 table 行的数据属性?
周-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>
周-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);
}
});
非常感谢任何帮助。
这应该有效:
console.log('Date of day: '
+ $(event.currentTarget).parent('.week-plan--date').data('date'));