如何在 Ember.js 中使用 if、else 和 not 语句？

Ember.js 是一个用于 Web 开发的框架。它使用其工具加快了开发和原型设计的过程。我们可以用它创建动态网页。基于动态数据，我们可能希望也可能不希望显示某些数据或某些 UI 或修改 UI。因此，我们将学习在 Ember.js 应用程序中使用 If、Else 和 Not。

创建项目

第 1 步：在终端或命令提示符中输入以下命令以创建新项目。

ember new ember_tutorial

项目结构：您的项目结构 可能如下所示。

项目结构

方法：我们示例项目的想法是将一些数据传递给我们的模板（车把）文件。车把将处理数据并在此基础上显示相同的数据。

第 2 步：让我们创建一些数据。在 app\routes 文件夹中创建一个新文件并将其命名为 application.js。这是一个项目列表，它们的可用性为真或假。我们已经用模型钩子导出了这些项目。这样，我们就可以将数据传递给 Ember.js 中的模板文件。这也是我们的应用程序从数据库或其他地方获取代码的地方。

app\routes\application.js

Javascript

import Route from '@ember/routing/route';
  
export default class ApplicationRoute extends Route {
  async model() {
    return {
      items: [
        {
          name: 'Milk',
          available: true,
        },
        {
          name: 'Eggs',
          available: true,
        },
        {
          name: 'Bread',
          available: true,
        },
        {
          name: 'Biscuits',
          available: false,
        },
      ],
    };
  }
}

第三步：这是我们的项目数据。现在让我们实现application.hbs文件。在 application.hbs 文件中，运行每个循环来列出每个项目。在这里，我们首先使用 #each 帮助器来迭代项目列表。然后我们使用 {{#if condition}} 和 item.available 来检查当前项目是否可用。如果可用，我们的项目将具有可用的类 else 我们使用 {{else}} 标记作为代码的 else 部分。如果该项目不可用，我们的项目将具有不可用的类。接下来在app.css文件中，添加以下代码用于样式设置。

HTML

  {{#each @model.items as |item|}}
  

    {{#if item.available}}
    

      {{item.name}}
    
    {{else}}
    

      {{item.name}}
    
    {{/if}}
  
  {{/each}}

{{outlet}}

CSS

.items li {
  list-style: decimal-leading-zero;
}
.items li .available {
  color: green;
}
.items li .notavailable {
  color: red;
}

运行应用程序的步骤：通过在终端/命令提示符上运行以下命令来运行项目。

ember serve

输出：

第 4 步：现在让我们在 Ember.js 中实现 NOT。在 ember 中，NOT 被实现为

{{#unless}}{{/unless}}

UNLESS 与 IF 正好相反。我们也可以在 UNLESS 中使用 ELSE。因此，我们将在每个项目下放置一个文本，以告知该项目是否可用。

应用\模板\应用程序.hbs

HTML

{{page-title 'EmberTutorial'}}

  GeeksforGeeks Ember Tutorial


  {{#each @model.items as |item|}}
  

    {{#if item.available}}
    

      {{item.name}}
    
    {{else}}
    

      {{item.name}}
    
    {{/if}}
    {{#unless item.available}}
    

      Not Available
    
    {{else}}
    

      Available
    
    {{/unless}}
  
  {{/each}}

{{outlet}}

运行应用程序的步骤：再次保存代码。通过在终端/命令提示符上运行以下命令来运行项目。

ember serve

输出：