riempire li con il contenuto a seconda dei risultati del database

sto lavorando con struttura senza grassi e attualmente sto lavorando su una generazione staffa per le competizioni.

quello che faccio è passare più concorrenti (da diversi “strati”) alla vista per visualizzarli in un albero. lo stile di base viene da questo codepen.

ora il problema è, che non conosco ogni campo dall’inizio in poi, come risultato delle prime due gare decidere come appare il livello successivo (quarti di finale in quel caso). il problema è però, che se non metto i campi lì, poi il layout completo viene distrutto, Ecco perché ho messo vuote <li> elementi per il livello, dove i concorrenti non sono chiare finora, così:

<li class="team-item">&nbsp;</li>
<li class="team-item">&nbsp;</li>
<li class="team-item">&nbsp;</li>
<li class="team-item">&nbsp;</li>

lo stesso per le semifinali e finali poi, solo con 2 e 1 <li> s poi.

ora in alcune celle di quarter / seminfinals ho già qualcosa nel mio database. così, per esempio, se ci sono 8 gare in “LAYER1”, allora avrei 4 campi vuoti in “Layer2”, rispettivamente nel quarto finale. questi 4 campi devono essere predefiniti per mantenere il layout. ora forse ho già riempito solo 1 o 2 di questi campi, perché le altre competizioni non sono ancora finite.

quindi devo sempre predefinire i campi come nel codice qui sopra. ora la domanda è: come sostituire una vuota <li> con quella riempita o, in alternativa, come riempire il vuoto <li> con informazioni, se fornito.

<ul class="bracket bracket-2">
      <repeat group="{{ @bracket }}" value="{{ @item }}">
        <check if="{{@item.layer == 2}}">
        <!-- li should be filled with this content, if the condition is true, so if in here -->
        <li class="team-item">{{ @item.Vorname1  }} {{ @item.Name1  }} <a href="/getFighterInformation/{{@item.fighter1ID}}"<i class="fa fa-pencil-alt"></i></a>&nbsp;<i class="fa fa-trophy"></i></li> 
      <li class="team-item">{{ @item.Vorname2  }} {{ @item.Name2  }} <a href="/getFighterInformation/{{@item.fighter2ID}}"<i class="fa fa-pencil-alt"></i></a>&nbsp;<i class="fa fa-trophy"></i></li>
  </check>
    </repeat>
  <!-- This should be predefined -->
  <li class="team-item">&nbsp;</li>
  <li class="team-item">&nbsp;</li>
  <li class="team-item">&nbsp;</li>
  <li class="team-item">&nbsp;</li>
  <!-------------------------------->
    </ul>

questo è un esempio per il livello 2 con 8 competizioni nel livello 1.

spero che si ottiene quello che voglio dire, ma la sua abbastanza difficile da spiegare…

così riassunto, la domanda è: è possibile predefinire gli elementi della lista ed allora riempirli o sostituirli, se un if-condizione abbina?

modifica: modifica:

questo è quello che ottengo dal database, riempito nella variabile bracket:

array(4){
   [
      0
   ]   => array(15)   {
      [
         "ID"
      ]      => string(1) "1"      [
         "eventID"
      ]      => string(1) "1"      [
         "kategorie"
      ]      => string(4) "FA62"      [
         "ebene"
      ]      => string(1) "3"      [
         "fighter1ID"
      ]      => string(2) "21"      [
         "Vorname1"
      ]      => string(5) "one"      [
         "Name1"
      ]      => string(4) "one"      [
         "Geburtsdatum1"
      ]      => string(10) "1999-04-04"      [
         "fighter1Pos"
      ]      => string(1) "0"      [
         "fighter2ID"
      ]      => string(2) "19"      [
         "Vorname2"
      ]      => string(8) "two"      [
         "Name2"
      ]      => string(4) "two"      [
         "Geburtsdatum2"
      ]      => string(10) "1988-12-11"      [
         "fighter2Pos"
      ]      => string(1) "1"      [
         "result"
      ]      => string(1) "0"
   }   [
      1
   ]   => array(15)   {
      [
         "ID"
      ]      => string(1) "2"      [
         "eventID"
      ]      => string(1) "1"      [
         "kategorie"
      ]      => string(4) "FA62"      [
         "ebene"
      ]      => string(1) "3"      [
         "fighter1ID"
      ]      => string(2) "25"      [
         "Vorname1"
      ]      => string(5) "three"      [
         "Name1"
      ]      => string(4) "three"      [
         "Geburtsdatum1"
      ]      => string(10) "1988-08-18"      [
         "fighter1Pos"
      ]      => string(1) "2"      [
         "fighter2ID"
      ]      => string(2) "24"      [
         "Vorname2"
      ]      => string(5) "four"      [
         "Name2"
      ]      => string(4) "four"      [
         "Geburtsdatum2"
      ]      => string(10) "1985-08-17"      [
         "fighter2Pos"
      ]      => string(1) "3"      [
         "result"
      ]      => string(1) "0"
   }   [
      2
   ]   => array(15)   {
      [
         "ID"
      ]      => string(1) "3"      [
         "eventID"
      ]      => string(1) "1"      [
         "kategorie"
      ]      => string(4) "FA62"      [
         "ebene"
      ]      => string(1) "3"      [
         "fighter1ID"
      ]      => string(2) "23"      [
         "Vorname1"
      ]      => string(5) "five"      [
         "Name1"
      ]      => string(4) "five"      [
         "Geburtsdatum1"
      ]      => string(10) "1966-06-16"      [
         "fighter1Pos"
      ]      => string(1) "4"      [
         "fighter2ID"
      ]      => string(2) "20"      [
         "Vorname2"
      ]      => string(8) "six"      [
         "Name2"
      ]      => string(4) "six"      [
         "Geburtsdatum2"
      ]      => string(10) "1966-03-03"      [
         "fighter2Pos"
      ]      => string(1) "5"      [
         "result"
      ]      => string(1) "0"
   }   [
      3
   ]   => array(15)   {
      [
         "ID"
      ]      => string(1) "4"      [
         "eventID"
      ]      => string(1) "1"      [
         "kategorie"
      ]      => string(4) "FA62"      [
         "ebene"
      ]      => string(1) "3"      [
         "fighter1ID"
      ]      => string(2) "18"      [
         "Vorname1"
      ]      => string(6) "seven"      [
         "Name1"
      ]      => string(4) "seven"      [
         "Geburtsdatum1"
      ]      => string(10) "1985-08-17"      [
         "fighter1Pos"
      ]      => string(1) "6"      [
         "fighter2ID"
      ]      => string(2) "22"      [
         "Vorname2"
      ]      => string(9) "eight"      [
         "Name2"
      ]      => string(4) "eight"      [
         "Geburtsdatum2"
      ]      => string(10) "1995-09-15"      [
         "fighter2Pos"
      ]      => string(1) "7"      [
         "result"
      ]      => string(1) "0"
   }
}

una scatola dovrebbe contenere un solo caccia, non due combattenti. quindi ogni elemento dell’array rappresenta una lotta, contenente due combattenti (riferibili da fighter1ID / fighter2ID, rispettivamente Name1, Name2, ecc.). fighter1Pos e fighter2Pos quindi, insieme al valore “Ebene”, che è il livello (3, 2, 1 o 0), determinano la posizione nella staffa, quindi il livello 3 con fighter1Pos 7 sarebbe l’ultima “scatola” nel livello 3 (contando da 0 a 7).

EN From: Fill li with content depending on database results

More similar articles:

14 Comments

  1. penso che ti stai avvicinando al problema nel modo sbagliato: se un elemento non ha alcun contenuto o significato, allora… l’elemento deve essere rimosso!

    non ha alcun senso avere una lunga lista di elementi LI vuoti; se quello che si desidera è che nel layout della pagina la lista non è mai più breve di linee x, allora si dovrebbe aggiungere qualcosa di simile

    ul {min-height:10em;}

    nel tuo foglio di stile.

    aggiungere elementi all’HTML solo per ottenere un layout specifico non è mai una buona idea, e cercare di aggiungere elementi segnaposto solo per poi rimuoverli in seguito è una cattiva idea, non solo per l’aspetto semantico del codice HTML, ma anche per la reattività dell’interfaccia utente ai comandi utente! :):)

    1. con il layout ho significato più la struttura dell’albero per la concorrenza, che dovrebbe sempre essere lì, e questo è solo lì, se ci sono elementi vuoti..
    2. quello è esattamente che cosa ho significato: se avete un motivo affinchè la modifica sia là, allora dovreste strutturare le modifiche per mostrare quel motivo…

      quello che voglio dire è che se, ad esempio, è necessario mostrare sempre la casella per le finali, anche quando ancora non si sa chi sta andando alla finale, allora questo significa che si dovrebbe generare la scatola finale in un ciclo che non dipende dai partecipanti reali…

      che cosa significo è che se per esempio avete 16 partecipanti, dovreste avere un ciclo fisso che genera 16 scatole, allora 8,4,2, allora uno e quel ciclo non dovrebbe dipendere in alcun modo dalla lista dei partecipanti.

  2. sì, è possibile selezionare un elemento di elenco utilizzando javascript e quindi aggiungere testo ad esso.

    prendere questa lista:

    <ul>
    <li class="team-item">Result 1</li>
    <li class="team-item">Result 2</li>
    <li class="team-item">Waiting for Result...</li>
    <li class="team-item">Waiting for Result...</li>
    </ul>

    e poi aggiungere uno script, come nell’esempio qui sotto:

    const resultsList = document.getElementsByTagName('ul')[0];
    const resultsListItems = resultsList.getElementsByTagName('li');

    resultsListItems[2].textContent = 'Result 3'; <ul>
    <li class="team-item">Result 1</li>
    <li class="team-item">Result 2</li>
    <li class="team-item">Waiting for Result...</li>
    <li class="team-item">Waiting for Result...</li>
    </ul>

    1. il problema è, come faccio a sapere quando impostare un valore e quando no? posso solo scrivere javascript tra il check e viene eseguito solo allora? non penso così… allora, quando assegnare i valori?

    2. il problema è che i dati vengono recuperati in un altro file, dove i miei percorsi sono, quindi fondamentalmente nel controller. i dati sono poi passati solo nella vista in cui ho accesso…

    3. Ah, vedo. sì, apprezzo il tuo dilemma. non ho mai lavorato con una configurazione Modello / Vista / Controller. lavoro ancora all’interno della Struttura / Presentazione / Comportamento separazione delle preoccupazioni.

  3. penso che si dovrebbe preparare meglio i dati prima di passare al modello.

    se il tuo array $brackets appare come:

    $brackets = [
      // first bracket
      1 => [
        [
          'A' => ['name' => 'John', 'id' => 123],
          'B' => ['name' => 'Jim', 'id' => 110],
          'time' => '20:00',
        ],
        [
          'A' => ['name' => 'Mary', 'id' => 141],
          'B' => ['name' => 'Bill', 'id' => 190],
          'time' => '14:00',
        ],
        //etc. (8 competitions)
      ],
      // second bracket
      2 => [
        [
          'A' => ['name' => 'John', 'id' => 123],
          'B' => ['name' => 'Mary', 'id' => 141],
          'time' => '18:00',
        ],
        //etc. (4 competitions)
      ],
      // third bracket
      3 => [
        [
          'A' => ['name' => 'John', 'id' => 123],
          'B' => NULL, // competitor B not known yet
          'time' => '16:00',
        ],
        //etc. (2 competitions)
      ],
      // last bracket (final)
      4 => [
        [
          'A' => NULL, // competitor A not known yet
          'B' => NULL, // competitor B not known yet
          'time' => '20:00',
        ],
      ],
    ];

    allora il vostro modello semplicemente assomiglierebbe:

    <div class="tournament-brackets">
      <repeat group="@brackets" key="@k" value="@competitions">
        <ul class="bracket bracket-{{ @k}}">
          <repeat group="@competitions" value="@competition">
            <li class="team-item">
              <check if="@competition.A">
                <true>
                  {{ @competition.A.name }}
                  <a href="/getFighterInformation/{{ @competition.A.id }}
                </true>
                <false>
                  Unknown competitor
                </false>
              </check>
              <time>{{ @competition.time }}</time>
              <check if="@competition.B">
                <true>
                  {{ @competition.B.name }}
                  <a href="/getFighterInformation/{{ @competition.B.id }}
                </true>
                <false>
                  Unknown competitor
                </false>
              </check>
            </li>
          </repeat>
        </ul>
      </repeat>
    1. questo DEFINETAMENTE mi porta nella giusta direzione, ma vorrei apprezzare se mi potreste aiutare a rendere davvero adatto al mio caso. ho appena aggiunto la struttura esatta dell’array. inoltre ho descritto la sua struttura, come nel mio caso, in una “scatola” (o uno team-item, per utilizzare la classe giusta per esso), Theres solo un combattente invece di due. se poteste aiutarlo ad adottare la vostra soluzione a quella situazione, la gradirei.

    2. per evidenziare: penso che la differenza più grande è quello che ho descritto (in modo che ogni combattente ha la sua scatola), ma anche, che non importa se le sue finali, semifinali o quarti di finale o qualsiasi altra cosa, la sua sempre la stessa, quindi Theres nessun elemento di array in più per questo. invece, lo strato corrente, rispettivamente se le sue finali, semifinali, ecc.. è scritto nella colonna “Ebene”, come descritto sopra nella mia modifica

    3. se avete bisogno di .team-item due volte per ogni “competizione”, basta duplicare il blocco <li class="team-item"> all’interno del ciclo <repeat group="@competitions" value="@competition">: una volta per il concorrente A, una volta per il concorrente B.
    4. sì, ma non è il problema principale… Come detto il mio array è strutturato in modo diverso, quindi non c’è un elemento per ogni lotta, e anche non c’è un elemento “genitore” per “strato”, ma il layer è scritto nella colonna “Ebene”… Sarebbe meglio cambiare il modello per adattarsi che poi o per cambiare l’array parentesi? se avessi bisogno di cambiare l’array di parentesi, puoi mostrarmi come lo cambierei per farlo al tuo formato?

Leave a Reply

Your email address will not be published. Required fields are marked *