在嵌套流星模板中访问 div

Question

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

父模板

<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 中删除 class progress-bar-danger 并即时将其替换为进度条成功。有什么想法可以实现吗？

Answer 1

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

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

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

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

在嵌套流星模板中访问 div

Access div in nested meteor template

html

javascript

meteor

meteor-blaze