Handlebars.js -如果image_url不包含“问号”
Handlebars.js -如果image_url不包含“问号”
提问于 2018-07-05 12:23:51
我在学Handlebars.js。这就是我的例子：
const url = 'https://api.jikan.moe/anime/1/characters_staff';
fetch(url)
.then(function(response) {
if (!response.ok) {
throw Error(response.statusText);
}
// Read the response as json.
return response.json();
})
.then(function(data) {
// Do stuff with the JSON
console.log(data);
createHtml(data.staff);
})
.catch(function(error) {
console.log('Looks like there was a problem: \n', error);
});
// Handlebars function to generate the HTML
function createHtml(ourData) {
let rawTemplate = document.querySelector("#ourTemplate").innerHTML;
let compiledTemplate = Handlebars.compile(rawTemplate);
let ourGeneratedHTML = compiledTemplate(ourData);
let ourContainer = document.querySelector("#container");
ourContainer.innerHTML = ourGeneratedHTML;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<ul id="container" class="cf"></ul>
<script id="ourTemplate" type="text/x-handlebars-template">
{{#each this}}
<li class='list-container'>
<div class="image-container">
<img src="{{ image_url }}">
</div>
<div class="name-container">
{{ name }}
</div>
</li>
{{/each}}
</script>
从API请求返回的一些数据没有图像。在没有图像的地方，就会显示一个场所持有者的图像，它的名称中有“问号”。
我想要实现的是，只有在图像名称中不包含“问号”的情况下，才能显示数据。
在Handlebars.js中有什么方法可以说:只有当image_url不包含“问号”时才显示数据？
像这样吗？
{{#each this}}
{{#if image_url !contains "questionmark"}}
<li class='list-container'>
<div class="image-container">
<img src="{{ image_url }}">
</div>
<div class="name-container">
{{ name }}
</div>
</li>
{{/if}}
{{/each}}
下面是关于codepen的相同示例：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-06 07:31:18
编辑(用于非节点js )
Handlebars.registerHelper('regex', function (data, regex) {
return (new RegExp(regex).test(data))
})然后，您可以这样使用它：
{{#each this}}
{{#unless (regex image_url 'questionmark')}}
<li class='list-container'>
<div class="image-container">
<a href="{{ url }}" target="_blank">
<img src="{{ image_url }}">
</a>
</div>
<div class="name-container">
{{ name }}
</div>
<div class='role-container'>{{{ role }}}</div>
</li>
{{/unless}}{{/each}}老POST (用于节点js)您可以像这样测试questionmark在image_url中的存在：
{{#each this}}
{{#unless (test image_url (toRegex "questionmark"))}}
<li class='list-container'>
<div class="image-container">
<img src="{{ image_url }}">
</div>
<div class="name-container">
{{ name }}
</div>
</li>
{{/unless}}
{{/each}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51191248
复制相关文章
相似问题
腾讯云开发者
