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设置为react-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);
        }
    }
});

有没有一种方法可以根据外部每个循环在嵌套的每个循环中进行折叠？

1 个答案: