我正在使用无脂肪框架，目前正在为比赛创建括号。
我要做的是将多个竞争对手（来自不同的“图层”）传递到视图中，以树状显示它们。基本样式来自this codepen。
现在的问题是，我从头开始并不了解每个领域，因为前两次比赛的结果决定了下一关的外观（在这种情况下为四分之一决赛）。但是问题是，如果我不把字段放在那儿，那么整个布局就会被破坏，这就是为什么我为该层放空的<li>元素，而到目前为止竞争对手还不清楚的原因：
<li class="team-item"> </li>
<li class="team-item"> </li>
<li class="team-item"> </li>
<li class="team-item"> </li>
半决赛和决赛也一样，然后只有2个和1个<li>。
现在，在四分之一/半决赛的某些单元格中，我的数据库中已有内容。因此，例如，如果“ layer1”中有8个比赛，那么我在四分之一决赛中将在“ layer2”中分别有4个空白字段。为了保留布局，必须预先定义这4个字段。现在也许我只填写了其中的1或2个字段，因为其他比赛尚未结束。
因此，我必须总是像上面的代码中那样预定义字段。现在的问题是：如何用填充的<li>替换一个空的<li>，或者，如果提供的话，如何用信息填充空白的<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> <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> <i class="fa fa-trophy"></i></li>
</check>
</repeat>
<!-- This should be predefined -->
<li class="team-item"> </li>
<li class="team-item"> </li>
<li class="team-item"> </li>
<li class="team-item"> </li>
<!-------------------------------->
</ul>
。
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"
}
}
这是第2层的示例，其中第1层有8个比赛。
我希望你明白我的意思，但这很难解释...
因此，总的来说，问题是：如果if条件匹配，是否可以预定义列表元素然后填充或替换它们？
编辑：
这是我从数据库中获得的内容，并填充到方括号变量中：
print(formAnArray(value: 1234))
func formAnArray(value: Int) -> [Int] {
let string = String(value)
return string.compactMap{Int(String($0))}
}
一个盒子只能容纳一名战士，而不能容纳两名战士。因此，每个数组元素代表一场战斗，其中包含两架战斗机（fighter1ID / fighter2ID可分别称为Name1，Name2等）。然后，fighter1Pos和fighter2Pos连同值“ ebene”（即层（3、2、1或0））一起确定括号中的位置，因此带有fighter1Pos 7的第3层将是该层中的最后一个“盒子” 3（从0到7）。
答案 0 :(得分：1)
我认为您最好在将数据传递到模板之前准备好数据。
如果您的$brackets数组如下所示：
$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',
],
],
];
然后您的模板看起来就像：
<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 :(得分：0)
我认为您正在以错误的方式解决该问题：如果某个元素没有任何内容或含义，那么...该元素应该被删除！
拥有一长串空的LI元素完全没有意义；如果您想要的是在页面布局中列表永远不会短于x行，那么您应该添加类似
ul {min-height:10em;}
在样式表中。
仅向HTML中添加元素以实现特定的布局绝不是一个好主意，而尝试添加占位符元素然后在之后将其删除则不是一个好主意，不仅对于HTML代码的语义方面，而且对于您的用户界面对用户命令的响应能力！ ：）
答案 2 :(得分：0)
是的，您可以使用javascript选择一个列表项，然后向其中添加文本。
加入此列表：
<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>
，然后添加一个脚本，如下例所示：
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>