Question

我正在学习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请求返回的某些数据没有图像。在没有图像的地方，都会显示一个占位符图像，其名称中带有“问号”。

我希望实现仅当图像名称中不包含“ questionmark”时才显示数据。

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 example

Answer 1

编辑（用于非节点js）--------- 您可以使用以下代码定义一个帮助程序：

            CREATE OR REPLACE PROCEDURE getDuplicate (ObjekatName IN VARCHAR2)
            AS
               V_COUNT   NUMBER;
            BEGIN
               SELECT   COUNT (1)
                 INTO   V_COUNT
                 FROM   TABLENAME
                WHERE   CatName = ObjekatName;

               IF (V_COUNT = 0)
               THEN
                  **-- insert command**

               END IF;
            END;

然后您将像这样使用它：

Handlebars.registerHelper('regex', function (data, regex) {
  return (new RegExp(regex).test(data))
})

OLD POST（用于节点js）------- 有一个有用的库，称为handlebars-helpers（https://github.com/helpers/handlebars-helpers#regex），它提供了一些正则表达式帮助器。您可以像这样测试{{#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}}中questionmark的存在：

image_url

Handlebars.js-如果image_url不包含“问号”

1 个答案: