Есть ли способ аккордеона внутри вложенного каждого цикла на основе внешнего каждого цикла? - PullRequest
Новая
       28

Есть ли способ аккордеона внутри вложенного каждого цикла на основе внешнего каждого цикла?

0 голосов
/ 04 апреля 2019

Я задавал вопрос раньше, но безрезультатно, но я пытался реализовать новую стратегию. У меня есть коллекция mongodb pieces, из которой я получаю информацию. Внутри коллекции у меня также есть массив parts, который мне нужен для доступа.

У меня есть вложенный цикл {{#each in ...}} для отображения всех элементов, однако проблема заключается в том, чтобы согласовать внутренний цикл на основе внешнего цикла. Вот мой код: 

<template name="band">
    <div class="container" style="padding-top: 25px">                 
          <div class="table-responsive">
              <table class="table table-borderless table-light table-sm">
                <thead class="thead-light">
                    <tr>
                        <th>Title:</th>
                        <th>See the Music:</th>
                        <th>Hear the Music:</th>
                        <th>Instrumentation:</th>
                        <th>Price (per copy):</th>
                        <th>Quantity:</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each piece in pieces}}
                    <tr id ="{{piece.name}}" class="itemList table-warning">
                        <th class="name tText">{{piece.name}}</th>
                        <td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
                        <td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
                        <td class="format tText">{{piece.instrumentation}}</td>
                        <th class="price tText" >${{piece.price}}</th>
                        <td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
                    </tr>
                    <tr class="partsList">
                        <td colspan ="3">
                            <select class="form-control">
                                <option autofocus value ="hide">Hide {{piece.name}} Parts</option>
                                <option value ="show">Show {{piece.name}} Parts</option>
                            </select>
                        </td>
                    </tr>
                        {{#if showParts}}
                            {{#each part in piece.parts}}
                                {{>partList piece=piece part=part}}
                            {{/each}}
                        {{/if}}
                    {{/each}}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan ="5"></td>
                        <td><button class = "button addItems">Add to Cart</button></td>
                    </tr>
                </tfoot>
            </table>
            </div> 
          </div>  


<template name="partList">
    <tr class="{{piece.name}}">
            <td colspan="3"></td>
            <td class="pname tText">{{piece.name}}: {{part.pname}}</td>
            <td class="price tText">${{part.pprice}}</td>
            <td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
        </tr>

И мой JS 

Template.band.events({'change select': function(event, template){
    if($(event.target).val()=="show"){
        template.showParts.set(true)
    }else{
        template.showParts.set(false);
    }
})}

Template.band.onCreated( function(){
Meteor.subscribe('bandList');
this.showParts = new ReactiveVar(false);});


Template.band.helpers({
pieces: function(){
    return bandmusic.find({},{sort:{name:1}}).fetch()
},
showParts: function(){
    return Template.instance().showParts.get()
}});

Все работает нормально, но каждый <template name="partList"> переключается при выборе опции <select>.

Есть ли способ добавить условие к пробелам, чтобы переключаться только на основе _id внешнего цикла {{#each}}? Или что-то подобное, учитывая логику, которую я использовал.

1 Ответ

0 голосов
/ 08 апреля 2019

Вы можете установить id для реактивного-var и получить его в условии if для достижения желаемого результата.

HTML 

{{#each piece in pieces}}
    ....
    <tr class="partsList">
        <td colspan ="3">
            <select data-id={{_id}} class="form-control">
                <option autofocus value ="hide">Hide {{piece.name}} Parts</option>
                <option value ="show">Show {{piece.name}} Parts</option>
            </select>
        </td>
    </tr>
    {{#if showParts _id}}
        {{#each part in piece.parts}}
            {{>partList piece=piece part=part}}
        {{/each}}
    {{/if}}
    ....
{{/each}}

JS 

Template.band.helpers({
    showParts(_id) {
        const selectedId = Template.instance().showParts.get();
        return selectedId && _id == selectedId;
    }
}
Template.band.events({
    'change select'(event, template) {
        if (event.currentTarget.value == "show") {
            const _id = event.currentTarget.dataset.id;
            template.showParts.set(_id);
        } else {
            template.showParts.set(null);
        }
    }
});
...