基于每个循环的外部，在嵌套的每个循环中是否有一种方法可以使用手风琴？

Question

我之前问过这个问题无济于事，但我试图实施一项新战略。我有一个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}}进行切换？根据我使用的逻辑，或类似的东西。

Answer 1

您可以将id设置为reactive-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);
        }
    }
});