Question

所以在我启动服务器之后，转到我的本地主机，然后单击注册或登录按钮，我的控制台中出现错误 “未捕获的ReferenceError：没有定义把手”我不知道究竟是什么问题。我尝试重新安装它，因为我可能没有安装它。在我实际点击按钮之前立即在控制台中弹出的错误是：

http://s23.postimg.org/bgbykf3qh/Screen_Shot_2015_12_16_at_10_02_14_AM.png

我也想过也许是因为我把脚本放在HTML文件的错误部分。但是，我一直得到同样的错误。

这是我的index.html文件的样子。

<html>
<head>

    <title>Wishes Project</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
</head>

<body>
        <h1>Wish List</h1>

        <button id="sign-up">Sign Up</button><br>
        <button id="login">Log In</button><br>

        <template id="status-template">
                <h3 id="status"></h3>
        </template>

        <div id="form-container"></div>

 <!-- LOGIN ===================== -->
        <template id="login-template">

                <div id="login-container" data-id="{{_id}}">
                    <input type="text" id="username" placeholder="username"/><br>
                    <input type="text" id="password" placeholder="password"/><br>
                    <button id="login-button" data-id="{{_id}}">Log In!</button>
                </div>

        </template>

<!--      NEW USER ===================== -->

        <template id="signup-template">

                <div id="signup-container" data-id="{{_id}}">
                    <input type-"text" id="username" placeholder="username"/></br>
                    <input type="text" id="password" placeholder="password"/></br>
                    <input type="text" data-id="{{_id}}">Register!</button>
                </div>

        </template> 


<!--    NEW WISH ======================= -->

        <template id="new-wish-template"> 

                <div id="new_wish-container" data-id="{{_id}}">
                    <input type="text" id="wish" placeholder="make a wish"/><br>
                    <button id="make-wish" data-id="{{_id}}">Create Wish!</button>
                </div> 

        </template> 



        <button id="logout">Logout</button>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0 4/handlebars.js"></script>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.js"></script>


</body>
</html>

这是我的app.js文件的样子。

console.log('app.js');

$(function() {

    $('#sign-up').click(signUpForm);
    $('#login').click(loginForm);
    $('#logout').click(delCookie).hide();

    if( Cookies.get('loggedinId') != undefined ) {
        wishForm();
    };

});

var formContainer = $('#form-container');

//LOGIN ==============================
    var loginForm = function() {
        console.log('showing login form'); 
        $('#sign-up').hide();
        $('#login').hide();

    var template = Handlebars.compile($('#login-template').html());
    formContainer.append(template);

    $('#login-button').click(function() {
        console.log('clicked');
        loginPost()

    });
};

var loginPost = function() {
    user = {
        username: $('#username').val(),
        password: $('#password').val(),
    }; 

    $.ajax({
        url: 'http://localhost:3000/login',
        method: "POST",
        dataType: 'json',
        data: user
    }).done(function(data) {
        console.log(data.username+"login successful");

        user = Cookies.get("loggedinId");

        wishForm()

     });
};

//LOG OUT =========================
var delCookie = function() {

    Cookies.remove('loggedinId');

    loginForm();


};


//NEW USER =========================
var signUpForm = function() {
    console.log('showing sign up form');
    $('#sign-up').hide();

    var template = Handlebars.compile($('#signup-template').html());
    formContainer.append(template);

    $('#register').click(function(){
        console.log('clicked register');
        newUser();
    });
};

var newUser = function() {
    user = { 
        username: $('#username').val(),
        password: $('#password').val(),
    };

    console.log(user);

    $.ajax({
        url: "http://localhost:3000/users",
        method: "POST",
        data: user
    }).done(function(data){
            wishForm();
    });
    user = Cookies.get(user.username);
};

var wishForm = function() {
    console.log('showing wish form');
    $('#sign-up').hide();
    $('#login').hide();
    $('#logout').show();
    formContainer.empty();

    var template = Handlebars.compile($('#new-wish-template').html());
    formContainer.append(template);   

    $('#make-wish').click(function() {
        console.log('clicked make wish');
        newWish();
    });
};

    var newWish = function() { 
        console.log('showing wish form');

        var wish = {
            content: $('#wish').

有人可以帮忙吗？谢谢。

Answer 1

错字。尝试：

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js

而不是：

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0 4/handlebars.js

Answer 2

您正在加载.js路径为error 404。做：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.js"></script>

有关Handlebars CDN

的更多信息

我遇到了车把问题（车把没有定义）

2 个答案: