如果父级有类，则流星渲染模板

Posted 2023-03-22

【中文标题】如果父级有类，则流星渲染模板

【英文标题】：Meteor render template if parent has class

【发布时间】：2017-04-10 18:54:22

【问题描述】：

您好，我只是想知道。我有一系列来自物化的可折叠 div。我想要的是，如果表头处于活动状态，则呈现模板。我正在使用流星掌上电脑包。所以我希望表格在活动时呈现。所以我所拥有的是。

 <ul class="collapsible" data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">filter_drama</i>Global What Ifs</div>
                        <div class="collapsible-body">
                            #if isActive
                                >GlobalWhatIf
                            /if
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
                        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
                        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                    </li>
                </ul>

如您所见，我目前只加载了一个模板，但我确实计划静默一些。

然后是我的js

Template.CompanyDetails.onRendered(function()
    $('.collapsible').collapsible();
);

Template.CompanyDetails.helpers(
    isActive: function(event) 
        return true;
    
)

Template.CompanyDetails.events(
    'click .collapsible-header' : function(event, template)
        console.log(event.currentTarget);
    
);

我想也许我可以在帮助程序中以某种方式传递事件目标，但似乎不起作用。有什么方法可以直接从车把上检查。

任何帮助都会很棒。

【问题讨论】：

您是否尝试过通过session 变量传递事件对象？

嗯。就像使用事件方法设置变量然后通过帮助程序访问它一样？我唯一的问题是我必须为每个可折叠的 div 有一个不同的助手

如果是这样的话，你可以注册一个全局助手

【参考方案1】：

这样的事情可能会奏效：

Template.CompanyDetails.onRendered(function()
    $('.collapsible').collapsible();
);

Template.CompanyDetails.helpers(
    isActive: function() 
       if(Session.get("event"))
        return true;
        Session.set("event",undefined);
    
  
)

Template.CompanyDetails.events(
    'click .collapsible-header' : function(event, template)
        console.log(event.currentTarget);
        Session.set("event",event);
    
);

【讨论】：

帮助是被动的

@AmyTeresaHyland 是的。助手在这里是响应式的，因为我们使用的是响应式的 Session。我看到的唯一缺点是刷新页面时会话未设置。