使用alpine.js注入带有未关闭标签的html

Question

什么是正确的方式来注入html的一部分，有未关闭的标签?
我使用x-if中的模数来确定何时关闭行并开始新的行。
这段代码不能工作，因为模板div立即关闭。

<template x-if="rowCount % 10 === 0"> 
<div>                                 
<!-- HTML to inject--> </div><div class="m-0 flex justify-between">  
</div>
</template>

Answer 1

正确的方法是将输入数据划分为所需的形状，然后使用两个循环。使用这种方法，我们不必处理未关闭的标签，并且代码更具可读性。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
function partition_array(input, amount) {
let output = [];
for (let i=0; i < input.length; i += amount) {
output[output.length] = input.slice(i, i + amount);
}
return output;
}
</script>

<div x-data="{array_of_arrays: partition_array([...Array(9).keys()], 3)}">
<div>
<template x-for="array in array_of_arrays">
<div>
<template x-for="item in array">
<span x-text="`${item} `"></span>
</template>
</div>
</template>
</div>
</div>