Handlebars.js - Если image_url не содержит «вопросительный знак» - PullRequest
Новая
       7

Handlebars.js - Если image_url не содержит «вопросительный знак»

0 голосов
/ 05 июля 2018

Я изучаю 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:

Пример Handlebars.js

1 Ответ

0 голосов
/ 06 июля 2018

РЕДАКТИРОВАТЬ (для использования без узла 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}}

СТАРЫЙ ПОСТ (для узла js) ------- Есть полезная библиотека под названием handlebars-helpers (https://github.com/helpers/handlebars-helpers#regex), которая предоставляет несколько помощников регулярных выражений. Вы можете проверить наличие 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}}
...