Скрыть div в Aurelia с оператором Switch - PullRequest
Новая
       24

Скрыть div в Aurelia с оператором Switch

1 голос
/ 22 января 2020

Как скрыть div с оператором switch. Вот что я пытаюсь сделать, но он будет скрывать все div, которые являются истинными или ложными.

home. html

<template>
<div repeat.for="color of colors">
   <div show.bind="condition">
      ${TypeOfGreeting(color)}
   </div>
<div>
</template>

home. js

export class Home {
condition;
  TypeOfGreeting(color) {
    let text = ""
    switch (color) {
      case "white":
        text = "good morning!";
        condition = true;
        break;
      case "black":
        text = "good night!";
        condition = true;
        break;
      case "orange":
        text = "good evening!";
        condition = true;
        break;
      case "red":
        condition = false;
        break;
      case "blue":
        condition = false;
        break;
      default:
        condition = false;
        text = "Error!";
    }
    return text;
  }
}

1 Ответ

3 голосов
/ 22 января 2020

condition в конечном итоге станет значением, которое было установлено при последнем вызове typeOfGreeting.

Один из способов сделать то, что вы хотите, это вернуть text и condition ( result в моем коде) в объекте.

См. Мой GistRun: https://gist.run/?id=91735851acd180eab2156e218c213668

приложение. html

<template>
  <div repeat.for="color of colors">
     <div show.bind="typeOfGreeting(color).result">
        ${typeOfGreeting(color).text}
     </div>
  <div>
</template>

приложение. js

export class App {
  colors = ['white', 'black', 'orange', 'red', 'blue'];

  typeOfGreeting (color) {
    let result;
    let text = ""

    switch (color) {
      case "white":
        text = "good morning!";
        result = true;
        break;

      case "black":
        text = "good night!";
        result = true;
        break;

      case "orange":
        text = "good evening!";
        result = true;
        break;

      case "red":
        result = false;
        break;

      case "blue":
        result = false;
        break;

      default:
        result = false;
        text = "Error!";
    }

    return {text, result};
  }
}
...