Оператор If внутри функции литерала шаблона - PullRequest
Новая
       17

Оператор If внутри функции литерала шаблона

0 голосов
/ 11 ноября 2019

Я просмотрел множество других сообщений по этой проблеме, но, похоже, не могу найти ответ, который соответствует моей конкретной проблеме. В основном у меня есть страница "приложение", которая отображает карты. Каждая карта - это отдельное приложение. Эти карты генерируются из объекта JavaScript с использованием литералов шаблона внутри функции. У меня есть три отдельных объекта, один для Engineering, Office и In House.

Что мне нужно сделать?

Прямо сейчас, когда вы загружаете сайт, вас встречают только три карточки, которые представляют категории. Я хочу создавать элементы из другого объекта в зависимости от того, какую категорию хочет пользователь. Например: когда пользователь нажимает кнопку на карте Engineering, генерируются только элементы внутри объекта approved_Engineering_Software.

Проблема, с которой я столкнулся, заключается в том, что у меня возникают проблемы с использованием if statements внутри литеральных функций моего шаблона. Я хочу иметь возможность сделать что-то вроде этого: 

function categoryTemplate(card) {
 if (`${card.title}` == "Engineering"){
  return `
   <card class="nested">
     <img class="image" src="${card.icon}">
       <div class="text">
         <h3>${card.title}</h3>
         <p>${card.description}</p>
         <button class="request-button" onclick="show_Engineering_items()">Request</button>
      </div>
   </card>
  `;
 }
}

Я проверил здесь здесь и здесь но ни один из ответовприведенные в этих ссылках успешно сработали.

Вот мой код, если вам нужно больше контекста:

HTML 

<!DOCTYPE html>
<html>
<head>
    <title>Software Request</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body class="main-page">
    <div id="category-view"></div>
    <div id="app"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript 

const main_Category_View = [
  {
    title: "Engineering",
    description: "From Autocad to something else that I will write in later, all your Enginerring Software is found here",
    icon: "Assets/docker1.png"
  },
  {
    title: "Office",
    description: "General purpose office applications e.g Microsoft Office, Excel, Powerpoint, Visio etc",
    icon: "Assets/docker1.png"
  },
  {
    title: "In House",
    description: "Apps build by In House specifically for In House",
    icon: "Assets/docker1.png"
  }
];

const approved_Engineering_Software = [
{
  title: "Microsoft Azure",
  description: "Microsoft Azure is a cloud computing service created by Microsoft for building, testing, deploying, and managing\
applications and services through Microsoft-managed data centers.",
  icon: "Assets/azure.png"
},
  {
    title: "Visual Studio Code",
    description: "Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux and macOS. It includes support \
for debugging, embedded Git control and GitHub, and code refactoring.",
    icon: "Assets/vscode.png"
  },
];

const approved_Office_Software = [
  {
    title: "Microsoft Word",
    description: "Microsoft Word is a word processor developed by Microsoft. It was first released on October 25, 1983 under the name Multi-Tool Word for Xenix systems.",
    icon: "Assets/word.png"
  }
];

//sorts everything perfectly
  var sortByProperty = function (property) {
    return function (x, y) {
        //basically returns nothing if they are equal,
        //or returns the item that is greater than the lesser
        return ((x[property] === y[property]) ? 0 : ((x[property] > y[property]) ? 1 : -1));
    };
  };

  // completes the rest of the structure of the cards
  function softTemplate(item) {
    return `
      <card class="nested">
        <img class="image" src="${item.icon}">
          <div class="text">
            <!--<button class="request-button" onclick="getDescription('${item.description}')">Request</button> -->
            <h3>${item.title}</h3>
            <p>${item.description}</p>
            <button class="request-button" onclick="getDesc()">Request</button>
        </div>
      </card>
    `;
  }

function categoryTemplate(card) {
  return `
    <card class="nested">
      <img class="image" src="${card.icon}">
        <div class="text">
          <!--<button class="request-button" onclick="getDescription('${card.description}')">Request</button> -->
          <h3>${card.title}</h3>
          <p>${card.description}</p>
          <button class="request-button" onclick="show_items()">Request</button>
      </div>
    </card>
  `;
}

document.getElementById("category-view").innerHTML = `
<div class="stack">
  <main class="grid">
    ${main_Category_View.map(categoryTemplate).join("")}
  </main>
</div>
`;

let sorted_Office_List = approved_Office_Software.sort(sortByProperty('title'));
let sorted_Engineering_List = approved_Engineering_Software.sort(sortByProperty('title'));

// Sets up the structure of the page and sends our Template Literal to two functions for work.
function show_items() {
  document.getElementById("app").innerHTML = `
  <div class="stack">
    <main class="grid">
      ${sorted_Office_List.map(getDesc).join("")}
      ${sorted_Office_List.map(softTemplate).join("")}
    </main>
  </div>
  `;
}

function show_Engineering_items() {
  document.getElementById("app").innerHTML = `
  <div class="stack">
    <main class="grid">
      ${sorted_Office_List.map(softTemplate).join("")}
    </main>
  </div>
  `;
}

1 Ответ

1 голос
/ 11 ноября 2019

литерал шаблона будет переведен как строка. у вас есть: 

if (`${card.description} == "Engineering"`)

, что будет переводиться как: 

if('Engineering == "Engineering"')

Непустые строки являются достоверными;что вы хотите сделать, это, вероятно: 

if (card.description === "Engineering")
...