如何使用jQuery/JavaScript检测data-*某个DOM元素的给定属性是否为空值？常见的比较运算符似乎无法正常工作,如下例所示.一世
可能接近:默认情况下检查没有值的HTML5数据属性或设置data-html5值
但这些答案都不符合这个问题.
HTML
<ul class="list">
<li class="list--item" data-id="x6gftcc-44">First entry</li>
<li class="list--item" data-id="">Last entry</li>
</ul>
<div class="message"></div>
一些CSS
.list{
list-style-type: none;
}
.list--item{
display: inline-block;
min-width: 200px;
padding: 20px;
border: 1px solid rgb(60,64,73);
cursor: pointer;
}
.message{
display: none;
}
.message.active{
display: block;
}
.true{
color: green;
}
.false{
color: red;
}
JavaScript
$(document).ready(function(){
$('.list--item').click(function(event, target){
function hasId(){
if ($(this).data('id') != ''){
return true;
}
else{
return false;
}
};
var entry = { …我刚开始使用jQuery和underscore.js来掌握使用JavaScript进行单页面应用程序开发的基础知识.在进入任何客户端MVC框架之前,我想了解一些更基本的东西,比如模板插入.
我的问题:当通过_.template()呈现HTML时,不会评估模板变量.HTML:
<body>
<script id="app-view-1" type="text/template">
<div id="app-view-1-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<ul class="choice-list">
<li><a class="" id="" href="#" data-choice="choice 1"></a></li>
<li><a class="" id="" href="#" data-choice="choice 2"></a></li>
</ul>
</div>
</script>
<script id="app-view-2" type="text/template">
<div id="app-view-2-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<form id="" class="input-panel active-panel" action="#">
<input type="text" id="input-field-1" class="app-control">
<input type="radio" id="radio-button-1" class="app-control" value="value-1">Value 1
<input type="submit" id="submit-button-1" class="app-control">
</form>
</div>
</script>
<header id="app-header">
<h1>Single Page App (SPA) Test</h1>
<nav id="main-menu-panel">
<ul id="main-menu">
<li class="main-menu-item"><a id="view-1" class="" data-target="app-view-1" href="#">View 1</a></li> …javascript jquery templates underscore.js single-page-application
我想建立一些互动周计划.我使用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 < …