Блог

Я хочу создать контрольный список, в котором заголовок/текст рядом с каждым флажком берется из списка имен, а описание заголовка прямо под каждым соответствующим флажком и заголовком берется из списка значений.

Второй список, список значений, будет выглядеть примерно так:

 ['Apple', 'Orange', 'Grape', 'Melon']
 

У меня есть контрольный список с заголовками рядом с ним, но я не понимаю, как я могу реализовать использование второго списка в HTL, который будет существовать под каждым флажком.

 <div class="class1" data-sly-list.item="${model.titleList}"> 
        <ul>
            <li class="class2">
                <label class="class3">
                    <input type="checkbox" name="check" value="${item.code}">
                        <span>${item.name}</span>
                </label>
          </li>
       </ul>
</div>
 

Я все еще изучаю HTL, буду признателен за любую помощь!

Предполагая, что вы используете такую модель, как:

 use(function () {
    return {
        titleList: ['Apple', 'Orange', 'Grape', 'Melon'],
        descriptionList: ["This is an apple", "This is an orange", "This is a grape"]
    };
});
 

Тогда вы могли бы просто использовать рычаги itemList.index против второго списка:

 <sly data-sly-use.model="logic.js"></sly>
<div class="class1" data-sly-list.item="${model.titleList}"> 
    <ul>
        <li class="class2">
            <label class="class3">
                <input type="checkbox" name="check" value="${item}">
                <span>${model.descriptionList[itemList.index]}</span>
        </label>
    </li>
</ul>
 

Тем не менее, я считаю, что лучший подход-это иметь правильную модель:

 use(function () {
    return {
        items: [
            { title: "Apple", description: "This is an apple"},
            { title: "Orange", description: "This is an orange"},
            { title: "Grape", description: "This is a grape"},
            { title: "Melon", description: ""}]
    };
});
 

и визуализируйте его, не полагаясь на слабую связь между списками:

 <sly data-sly-use.model="logic.js"></sly>
<div class="class1" data-sly-list.item="${model.items}"> 
    <ul>
        <li class="class2">
            <label class="class3">
                <input type="checkbox" name="check" value="${item.title}">
                <span>${item.description}</span>
        </label>
    </li>
</ul>