Этот код не работает (без причины)?

Этот код взят из этого руководства: https://waaave.com/tutorial/meteor/design-a-complete-authentication-system-with-meteor/#L11

это шаг 6.1, и, насколько я могу судить, ошибок нет, но по какой-то причине он не работает, и ссылка «Забыли пароль» ничего не делает, когда я нажимаю на нее. Кто-нибудь знает, что случилось?

Javascript:

Template.main.helpers({
    showForgotPassword: function() {
        return Session.get('showForgotPassword');
    }
});

// Sign In Template
Template.signIn.events({
    'submit #signInForm': function(e, t) {
        e.preventDefault();

        var signInForm = $(e.currentTarget),
            email = trimInput(signInForm.find('.email').val().toLowerCase()),
            password = signInForm.find('.password').val();

        if (isNotEmpty(email) && isEmail(email) && isNotEmpty(password) && isValidPassword(password)) {
            Meteor.loginWithPassword(email, password, function(err) {
                if (err) {
                    Session.set('alert', 'We\'re sorry but these credentials are not valid.');
                } else {
                    Sesson.set('alert', 'Welcome back New Meteorite!');

                }
            });
        }
        return false;
    },

      'click #showForgotPassword': function(e, t) {
        Session.set('showForgotPassword', true);
        return false;
    },

});

HTML:

<div id="topbar">
            {{> signOut}}
     {{#unless resetPassword}}
         {{#unless currentUser}}
             {{#unless showForgotPassword}}
             {{else}}
                  {{> forgotPassword}}
             {{/unless}}
         {{else}}
          {{/unless}}
     {{else}}
         {{> resetPassword}}
     {{/unless}}
    </div>

<template name="signIn">
            <a class="show-forgot-password" href="javascript:void(0);" id="showForgotPassword">Forgot Password?</a>
    <div class="sign-in" id="signIn">
        <form action="/signin" class="sign-in-form" id="signInForm" method="post">
            <input class="email" id="signInEmail" type="text" name="email" placeholder="Email">
            <input class="password" id="signInPassword" type="password" name="password" placeholder="Password">
            <input class="btn btn-success" id"signInButton" type="submit" value="Sign In">
        </form>
    </div>
    <!-- end .sign-in -->
</template>

<template name="signOut">
    <div class="connected">
        <a class="sign-out" href="/" id="signOut">Sign Out</a>
    </div>
    <!-- end .connected -->
</template>

<template name="signUp">
    <div class="sign-up">
        <form action="/sign-up" class="sign-up-form" id="signUpForm" method="post">
            <input class="username" id="signUpUsername" name="username" placeholder="Username" type="text" >
            <input class="email" id="signUpEmail" name="email" placeholder="Email" type="text" >
            <input class="password" id="signUpPassword" name="password" placeholder="Password" type="password">
            <input class="password-confirm" id="signUpPasswordConfirm" name="password-confirm" placeholder="Confirm" type="password">
            <input class="btn btn-success" type="submit" id="submit" value="Sign up for Chattly">
        </form>
    </div>
    <!-- end .sign-up -->
</template>

<template name="forgotPassword">
    <div class="forgot-password" id="forgotPassword">
        <a class="return-to-sign-in" href="javascript:void(0);" id="returnToSignIn">Return</a>
        <form action="/forgot" class="forgot-password-form" id="forgotPasswordForm" method="post">
            <input class="email" id="forgotPasswordEmail" type="text" name="email" placeholder="Email Address">
            <input class="btn-submit" type="submit" value="Send">
        </form>
    </div>
    <!-- end .forgot-password -->
</template>

<template name="resetPassword">
    <div class="reset-password">
        <h2 class="headline">You're now saved, <span class="bold">follow the light!</span></h2>
        <h3 class="details">You just have to type and confirm your new password to regain access to your dashboard.</h3>
        <form action="/reset-password" class="reset-password-form" id="resetPasswordForm" method="post">
            <input class="password" id="resetPasswordPassword" name="password" placeholder="Your New Password" type="password" >
            <input class="password-confirm" id="resetPasswordPasswordConfirm" name="password-confirm" placeholder="Confirm New Password" type="password" >
            <input class="btn-submit" type="submit" value="Reset">
        </form>
    </div>
    <!-- end .reset-password -->
</template>

person 5AMWE5T    schedule 01.03.2014    source источник
comment
проверьте консоль на наличие ошибок сценариев. @5AMWE5T   -  person Sumit Pathak    schedule 01.03.2014
comment
Uncaught TypeError: не удается вызвать метод «помощников» неопределенного ui.js?   -  person 5AMWE5T    schedule 01.03.2014
comment
Uncaught TypeError: Object #‹Object› не имеет метода «опубликовать» users.js?bb47c4d55c2aea6f0ebc3c61b1c10283cb7196e4:5   -  person 5AMWE5T    schedule 01.03.2014
comment
Также, когда я наводил курсор на ссылку «Забыли пароль», он говорит javascript:void(0); это должно произойти?   -  person 5AMWE5T    schedule 01.03.2014
comment
@ 5AMWE5T да, это нужно для предотвращения действия щелчка привязки по умолчанию, чтобы обработчик щелчка мог зафиксировать событие.   -  person Serkan Durusoy    schedule 02.03.2014


Ответы (1)


На этом этапе (6.1) в руководстве вы еще не настроили обработчики событий для forgotPassword. Это не работает, потому что кода еще нет.

В следующем разделе 6.2 автор проведет вас через отправку электронного письма для инициации восстановления пароля:

Template.forgotPassword.events({
    'submit #forgotPasswordForm': function(e, t) {
        e.preventDefault();

        var forgotPasswordForm = $(e.currentTarget),
            email = trimInput(forgotPasswordForm.find('#forgotPasswordEmail').val().toLowerCase());

        if (isNotEmpty(email) && isEmail(email)) {
            Accounts.forgotPassword({email: email}, function(err) {
                if (err) {
                    if (err.message === 'User not found [403]') {
                        Session.set('alert', 'This email does not exist.');
                    } else {
                        Session.set('alert', 'We\'re sorry but something went wrong.');
                    }
                } else {
                    Session.set('alert', 'Email Sent. Please check your mailbox to reset your password.');
                }
            });
        }
        return false;
    },

    'click #returnToSignIn': function(e, t) {
        Session.set('showForgotPassword', null);
        return false;
    },
});

Это распространенный шаблон, который я видел в последних уроках.

Вместо того, чтобы дать вам в начале полное приложение и разбить его на части, авторы используют итеративный подход и создают приложение по частям, что вы обычно делаете, если вам нужно создать приложение.

Так что это прекрасно работает в качестве учебника. Просто потерпите до конца :)

ОБНОВЛЕНИЕ: Форма для забытого пароля не отображается, потому что она должна находиться в шаблоне с именем main, как показано в этом коде:

<template name="main">
    {{> alert}}
    {{#unless resetPassword}}
        {{#unless currentUser}}
            {{#unless showForgotPassword}}
                {{> signIn}}
                {{> signUp}}
            {{else}}
                {{> forgotPassword}}
            {{/unless}}
        {{else}}
            {{> signOut}}
        {{/unless}}
    {{else}}
        {{> resetPassword}}
    {{/unless}}
</template>

и следующий помощник берет параметр сеанса и передает его в блок unless:

Template.main.helpers({
    showForgotPassword: function() {
        return Session.get('showForgotPassword');
    }
});

но в вашем коде нет этого шаблона main, вместо этого вы обернули свой код в общий div, и вы также, похоже, изменили некоторые другие части кода.

<div id="topbar">
            {{> signOut}}
     {{#unless resetPassword}}
         {{#unless currentUser}}
             {{#unless showForgotPassword}}
             {{else}}
                  {{> forgotPassword}}
             {{/unless}}
         {{else}}
          {{/unless}}
     {{else}}
         {{> resetPassword}}
     {{/unless}}
    </div>

Таким образом, вы можете либо использовать исходный код из учебника, либо, если вы действительно хотите изменить этот код, вы можете обернуть topbar div main template, как показано в исходном коде.

person Serkan Durusoy    schedule 01.03.2014
comment
Проблема в том, что когда я нажимаю на ссылку забыл пароль, форма вообще не отображается, как должна. Я еще не пробовал отправить письмо - person 5AMWE5T; 02.03.2014
comment
@ 5AMWE5T Я обновил ответ. В вашем коде отсутствует тег <template name="main"> вокруг div верхней панели. - person Serkan Durusoy; 02.03.2014