admin管理员组文章数量:1326134
Trying to e to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.
Problem
Mustache is pletely ignoring the conditional and displaying both true and false for each table row.
My code
My markup
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
My jQuery
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
Question
Why is the if/else not working here?
EDIT: Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src=".1.1/jquery.min.js"></script>
<script src=".js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Mustache Examples</h1>
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
</div>
<script>
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
</script>
</body>
</html>
Trying to e to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.
Problem
Mustache is pletely ignoring the conditional and displaying both true and false for each table row.
My code
My markup
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
My jQuery
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
Question
Why is the if/else not working here?
EDIT: Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Mustache Examples</h1>
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
</div>
<script>
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
</script>
</body>
</html>
-
1
You provided
template3, while usingtemplate2in view. There is nois_frenchusage intemplate2. – Andrey Commented Feb 14, 2017 at 12:06 - My bad! So sorry about that, copied the wrong block! – Jethro Hazelhurst Commented Feb 14, 2017 at 12:08
- 2 Interesting, but the code you've posted is totally OK, mustache template is fine, and it rendered as supposed. There should be the mistake in another part of code. Could you create fiddle where this problem reproduces? – Andrey Commented Feb 14, 2017 at 12:15
- Trying to get a fiddle going... I updated my OP with the entire document. Strange indeed. – Jethro Hazelhurst Commented Feb 14, 2017 at 12:17
- jsfiddle/poeama5u – Jethro Hazelhurst Commented Feb 14, 2017 at 12:20
1 Answer
Reset to default 6This is a problem of using template tag, which is actually HTML5 template tag. Using hashes in it makes browser think that this is document fragment. Seems like nested document fragments corrupt Mustache template.
Just change it to script tag, as in mustache manual.
<script id="template2" type="x-tmpl-mustache">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</script>
本文标签： javascriptMustache conditional statement (ifelse) not workingStack Overflow
版权声明：本文标题：javascript - Mustache conditional statement (ifelse) not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742190847a2430183.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论