访问嵌套流星模板中的 div答案

【问题标题】：Access div in nested meteor template访问嵌套流星模板中的 div
【发布时间】：2016-09-13 22:44:10
【问题描述】：

我正在尝试访问或更准确地说是从其父模板中删除嵌套模板中的类。这是我的代码的结构。

父模板

<template name='paymentTemplate'>
  <div class="progress-wrapper">
     {{>progressBar }}
  </div>
 </template>

子模板

<template name="progressBar">
<div class="progress">
      <div class="checkoutPrg progress-bar progress-bar-success" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Checkout
    </div>
    <div class="DeliveryPrg progress-bar progress-bar-danger " role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Delivery
    </div>
    <div class="PaymentPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Payment
    </div>
    <div class="ConfirmationPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Confirmation
    </div>


</div>
</template>

所以，我的目标是从每个相应的 div 中删除类 progress-bar-danger 并即时将其替换为 progress-bar-success。有什么想法可以实现吗？

【问题讨论】：

将变量传递给progressBar 模板并让类依赖它（使用reactiveVar），类似于this。

标签： javascript html meteor meteor-blaze

【解决方案1】：

假设你有一个在进度条完成时触发的函数，你可以像这样使用简单的 jQuery：

$('.DeliveryPrg').removeClass('progress-bar-danger');
$('.DeliveryPrg').addClass('progress-bar-success');

这可以在父模板中完成（如果这是完成功能运行的地方），也可以在子模板中完成，甚至可以在其他一些完全不相关的模板中完成。唯一的要求是嵌套模板应该已经被渲染。

当直接选择 DOM 元素时，并不要求必须由实际呈现该元素的模板来完成。 DOM 元素不知道是哪个模板渲染了它:-)

【讨论】：