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

Ember.js是一个用于网页开发的框架。它通过提供工具来加快开发和原型设计过程。我们可以用它来创建动态网页。根据动态数据，我们可能希望显示或不显示某些数据、UI或修改UI。因此，我们将学习在Ember.js应用程序中如何使用if、else和not语句。

创建项目

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

ember new ember_tutorial

项目结构：

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

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

方法： 我们示例项目的想法是将一些数据传递给我们的模板（handlebar）文件。Handlebar将处理数据，并根据数据显示相应内容。

步骤2： 创建一些数据。在app\routes文件夹中新建一个名为application.js的文件。这里是一个项目列表，显示它们的可用性（true或false）。我们使用model hook导出了这些项目。这样，我们就能在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, 
        }, 
      ], 
    }; 
  } 
}

步骤3： 这是我们的项目数据。现在让我们实现application.hbs 文件。在application.hbs文件中，使用each-loop循环列出每个项目。在这里，我们首先使用#each helper迭代项目列表。然后，我们使用{{#if condition}}与item.available一起检查当前项目是否可用。如果可用，我们的项目将具有可用的类，否则我们使用{{else}}标签用于代码的其他部分。如果项目不可用，我们的项目将具有不可用的类。接下来，在app.css文件中，添加以下代码以进行样式设置。

HTML

<ul class="items"> 
  {{#each @model.items as |item|}} 
  <li> 
    {{#if item.available}} 
    <h4 class="available"> 
      {{item.name}} 
    </h4> 
    {{else}} 
    <h4 class="notavailable"> 
      {{item.name}} 
    </h4> 
    {{/if}} 
  </li> 
  {{/each}} 
</ul> 
{{outlet}}

CSS

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

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

ember serve

输出:

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

步骤4： 现在让我们在Ember.js中实现NOT。在Ember中，NOT的实现如下：

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

UNLESS（除非）正好与IF相反。我们还可以在UNLESS内部使用ELSE。因此，我们将在每个项目下面放置一个文本，告诉用户该项目是否可用。

app\templates\application.hbs

HTML

{{page-title 'EmberTutorial'}} 
<h2> 
  GeeksforGeeks Ember Tutorial 
</h2> 
<ul class="items"> 
  {{#each @model.items as |item|}} 
  <li> 
    {{#if item.available}} 
    <h4 class="available"> 
      {{item.name}} 
    </h4> 
    {{else}} 
    <h4 class="notavailable"> 
      {{item.name}} 
    </h4> 
    {{/if}} 
    {{#unless item.available}} 
    <p> 
      Not Available 
    </p> 
    {{else}} 
    <p> 
      Available 
    </p> 
    {{/unless}} 
  </li> 
  {{/each}} 
</ul> 
{{outlet}}

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