it-swarm.com.de

If-Anweisung innerhalb des ES6-Vorlagenliteral einfügen

Ich habe eine einfache Ajax-Anfrage, die einige Daten zurückgibt und dann in ein Vorlagenliteral einfügt. Ich habe mich gefragt, ob es möglich ist, eine 'if'-Anweisung in die Vorlage einzufügen. 

Im Wesentlichen um eine weitere Codezeile hinzuzufügen, wenn das Json-Objekt eine fünfte Farbe hat.

  $.ajax({
url: 'http://localhost:8888/ColourCatchr%202/app/search.php'
}).done(function(results){
var res = jQuery.parseJSON(results);
console.log(res);
$.each(res,function(index,result){
  $('.palettes').append(`
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">${result.name}</h3>
      </div>
      <div class="panel-body">
        <div class="col-md-12 colors">
          <div class="color" style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>
          <div class="color" style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>
          <div class="color" style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>
          <div class="color" style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>

          ${if(result['color 5']){
            <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
            }
          }

          <div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
          <p>on hover change to translucent background and black text for ecah color</p>
        </div>
      </div>
      <div class="panel-footer">
          <a class="btn btn-info btn-lg" href="update.html?id=${result.id}">Edit</a>
          <a class="btn btn-danger btn-lg">Delete</a>
      </div>
    </div>`
    )
})

})
9
Chris Hurst

Sie müssen Ihre Logik in eine Funktion verschieben oder den ternären Operator verwenden:

`${result['color 5'] ? 'color 5 exists!' : 'color 5 does not exist!'}`

Zusätzliches Beispiel basierend auf Kommentar:

`${result['color 5'] ? 
    `<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>` 
: ''}`
15
Andy Gaskell

sie können das auch tun 

`${result['color 5'] && `Color 5 exists`}`
5
etoxin

Aus dem Artikel MDN über Vorlagenzeichenfolgen:

Template-Literale sind String-Literale, die eingebettete Ausdrücke erlauben.

Ich würde argumentieren, wenn Sie eine kompliziertere Logik als einen ternären Ausdruck in Ihren Vorlagenzeichenfolgen benötigen, sollten Sie erwägen, Ihren Code umzugestalten. Da dies jedoch in den anderen Antworten hier nicht dargestellt wurde, können Sie auch ein IIFE verwenden (sofort aufgerufene Funktion Ausdruck). Dies kann selbst in Fällen nützlich sein, in denen ein ternärer Ausdruck ohnehin ausreichen würde, um Ihre Verzweigungslogik zu verdeutlichen, insbesondere in Fällen, in denen Sie andere mehrzeilige Vorlagenzeichenfolgen einbetten.

Lassen Sie mich Ihnen ein Beispiel geben:

html`
  <div class="example">
    ${(() => {
      if (result['color 5']) {
        return html`
          <div class="color-preview" style="background-color: ${result['color 5']}"></div>
          <span> Here's your color #5 </span>
        `
      } else {
        return html`<div>You don't have a 5th color</div>`
      }
    })()}
  </div>
`

Mit dieser Technik können Sie eine beliebige JavaScript-Syntax "innerhalb" Ihrer Vorlagenzeichenfolge verwenden

2
Zev Isert
const heading = 'head';
const location = 'erode';
const district = 'erode';

const isSameLocationDistrict = (location === district) || false;
const storeSlug = `${heading} ${isSameLocationDistrict === true ? location : `${location } ${district}`}`;
console.log(storeSlug);

// "head erode"
// "head erode1 erode"
0
saravanakumar

So verwenden Sie eine variable bei Verwendung von ternary operator use nested template litral

let var1 = 6
let var2 = 8

console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)

0
BlackBeard