Template.myTemplate.onRendered无法处理多个模板

Question

我的注册流程有多个步骤。

我的进度条在每一步之间上升了25％

每个步骤都在一个单独的路线上，例如（/ register - ＆gt; / choose-email - ＆gt; / choose-alerts）等。

要在每个步骤之间向进度条添加动画，我创建了以下功能：

if (Meteor.isClient) {
    Template.chooseEmail.onRendered(function () {
      var bar = this.find("#progressBar");
      bar.style.width = "25%";
    });

    Template.chooseAlerts.onRendered(function () {
      var bar = this.find("#progressBar");
      bar.style.width = "50%";
    });
}

出于某种原因，第二个onRendered函数不起作用。当我加载第一个模板＆＃34;选择电子邮件＆＃34;时，我看到进度条的动画形式为0-25％。当我加载第二个模板＆＃34; selectAlerts＆＃34;进度条显示在屏幕上显示的秒的50％。所以onRendered并没有工作

模板chooseEmail

<template name="chooseEmail">

    {{> navbar}}
    <div class="container chooseEmail">

        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
            <div class="text-center">
                <h1>Choose where your alerts go</h1>
                <h2>This is the email address we will send all your alerts to.</h2>
                <h6>You can change this later.</h6>
            </div>

            <div class="progress">
                <div id="progressBar" class="progress-bar progress-bar-warning progress-bar-striped active"></div>
            </div>

            <div class="well">

                <div class="row">


                    <form name="chooseEmail" id="chooseEmail" method="post" role="form">
                        <div class="col-xs-12 col-sm-6">
                            <input type="email" class="form-control" id="alertEmail" autofocus required name="alertEmail" placeholder="Email Address" value="{{userEmail}}">
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <button type="submit" data-loading-text="Roger that!" class="btn btn-success btn-block">Ok, next step!</button>
                        </div>
                    </form>


                </div><!-- Row -->
            </div><!-- Well -->
        </div>
    </div>
</template>

模板chooseAlerts

<template name="chooseAlerts">
    {{> navbar}}
    <div class="container chooseAlerts">

        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
            <div class="text-center">
                <h1>Setup some alerts</h1>
                <h2>These are the events that will Hooked will notify you about</h2>
                <h6>You can change these later.</h6>
            </div>

            <div class="progress">
                <div id="progressBar" class="progress-bar progress-bar-warning progress-bar-striped active"></div>
            </div>

            <div class="well">

                <!--Choose Alerts-->

                <form action="" method="post">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>
                        </div><!-- End Col -->
                        <div class="col-xs-12 col-sm-6">

                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="checkbox1">
                                <label for="checkbox1">
                                    Check me out
                                </label>
                            </div>
                        </div><!-- End Col -->
                    </div><!-- End Row -->

                </form>



            </div>

        </div>
    </div>
</template>

出于某种原因，第二个onRendered函数不起作用。我无法解决原因，或者在页面加载时有任何其他方法可以调整进度条的宽度

感谢您的帮助