Question

Is there a way in Aurelia to say 'If x == this, then show this'?

To be specific, I have an array of data that looks something like this:
[
     {objectID: 1, customDataArray: [1,2,3,4], customDataType: { cdt: "Troops" }}
]

This array obviously has multiple rows that look like the one above where it's passing me an array of custom values that I need to reference. Those values could be the IDs of different 'groups' in our system. That's why we are passing in an object the contains what type of custom data it is. e.g. "Troops"

So what's happening is on Activate, I'm fetching all this data from my API and storing it in a variable. Well based on whether the custom data type is "Troops" or something else, I want to show a different input label. For example, if it is "Troops," I want to show a label that says "input troop id's" and so on.

Also, sometimes the customDataType isn't required so it comes in as null. So in that case, I want to show something different. Not sure how to handle this one..

Answer 1

The if custom attribute or the show custom attribute would work. Unfortunately, we don't have a switch or else type of setup.

<label if.bind="p.customDataType.cdt === 'Troops'">Input Troop Ids</label>
<label if.bind="p.customDataType.cdt !== 'Troops'">Something Different</label>

Answer 2

You could try if if.bind could be useful for this, as below:

  <ul>
    <li repeat.for="obj of data"  if.bind="obj.customDataType">
      <span>${obj.customDataType.cdt}</span> - 
      <strong repeat.for="cda of obj.customDataArray">${cda}, </strong>
    </li>
    <li repeat.for="obj of data"  if.bind="!obj.customDataType">
      <span>No CustomDataType</span>
      <strong repeat.for="cda of obj.customDataArray">${cda}, </strong>
    </li>
  </ul>

Here is a plunker that shows this in action: https://gist.run/?id=21991c490810a4acf2e38cec99614bbd

How to conditionally display client-side data with Aurelia

2 个答案: