密码恢复助手无法使用流星打开我的模式答案

【问题标题】：Password recovery helper doesn't open my modal with meteor密码恢复助手无法使用流星打开我的模式
【发布时间】：2016-06-10 02:42:30
【问题描述】：

我正在使用本指南来实现密码重置。当用户点击生成的链接时，它应该在 Bootstrap 中打开我的“resetPassword”模式。

http://blog.benmcmahen.com/post/41741539120/building-a-customized-accounts-ui-for-meteor

在我的 client\main.js 我有这个代码：

Template.recoverpopup.helpers({
    resetPassword : function(t) {
        return Session.get('resetPassword');
        Modal.show('reset_password');
    }
});

if (Accounts._resetPasswordToken) {
    Session.set('resetPassword', Accounts._resetPasswordToken);
}

resetPassword 会话变量通过控制台返回一个值。我是 Meteor 的新手，我还在摸索中，但我认为该功能没有运行。

模板代码：

<template name="recoverpopup">
    {{#if resetPassword}}
        <div class="modal fade" id="reset_password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Reset je wachtwoord</h1><br>
                    <div id="reset_error" class="alert alert-danger hide">
                        <strong>Error:</strong>
                    </div>

                    <form id="resetform">
                        <input type="password" name="pass" id="newpassword" placeholder="Nieuw wachtwoord">
                        <input type="submit" name="reset" class="register loginmodal-submit" value="Reset">
                    </form>
                </div>
            </div>
        </div>
    {{else}}
        <div class="modal fade" id="recovermodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Wachtwoord vergeten</h1><br>
                    <div id="recover_error" class="alert alert-danger hide">
                        <strong>Error:</strong>
                    </div>
                    <div id="recover_info" class="alert alert-info hide">
                        <strong>Info:</strong>
                    </div>
                    <form id="recoverform">
                        <input type="email" name="email" placeholder="Email-adres">
                        <!--<input type="password" name="pass" placeholder="Password">-->
                        <input type="submit" name="recover" class="login loginmodal-submit" value="Verstuur">
                    </form>

                    <div class="login-help">
                        <a href="#" data-toggle="modal" data-target="#registermodal" onclick="$('#recovermodal').modal('hide');">Registreer</a> - <a href="#" data-toggle="modal" data-target="#loginmodal" onclick="$('#recovermodal').modal('hide');" >Login</a>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}
</template>

【问题讨论】：

标签： javascript twitter-bootstrap meteor

【解决方案1】：

我没有阅读您的指南，但根据我在您的代码中看到的内容，我建议您离开它。你在官方docs.meteor.com 有一个完美的。

帮助您：如果您想调用某些操作，请不要使用助手观察您的 Session 元素。助手就像 getter - 用于接收数据。您要使用的是客户端事件。

我不会给你直接的解决方案，而是简单易读的例子，你应该如何使用 Meteor。假设您按下 id="resetPass" 的按钮，并且您已使用 id="resetPassModal" 声明模态。

您所做的是观看活动：

Template.yourTemplateName.events({
    "click #resetPass": function(event) {
        event.preventDefault();
        $("#resetPassModal").show()
    }
});

请记住“Multiple open modals not supported” 更多详情请在 cmets 或 create 中询问。

【讨论】：