Question

我目前正在学习如何在Backbone.JS中编程，并且我继续遇到以下错误：

未捕获的ReferenceError：未定义homePage

未捕获的ReferenceError：未定义homePage app.js：30   Backbone.Router.extend.displayHome app.js：30（匿名函数）   backbone-min.js：1（匿名函数）backbone-min.js：1 j.some.j.any   underscore-min.js：5 h.extend.loadUrl backbone-min.js：1   h.extend.checkUrl backbone-min.js：1 x.event.dispatch   的jquery-1.10.2.min.js：5   v.handle

我使用Node.JS为服务器，Handlebars作为模板，JQuery以及您将在HTML中看到的其他人。该错误似乎来自app.js文件中的initialize函数。如果我取消注释

//var homePage = new HomePage({name: 'J***, address: 'JC'});

它呈现完美。

这可能是一个小错误，我可能已经监督或它自己的库中的某些东西。我还是新手。任何帮助将不胜感激。

以下内容： HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Testing Pages || JayVee Protype</title>
        <!--CSS Libs-->
        <link rel="stylesheet" type="text/css" href="css/lib/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-inverse">
                <a href="#" class="navbar-brand">JayVee</a>
                <ul class="nav navbar-nav">
                    <li><a href="#/me">Me</a></li>
                    <li><a href="#/resume">Resume</a></li>
                    <li><a href="#/projects">Projects</a></li>
                    <li><a href="#/contact">Contact</a></li>
                </ul>
            </nav>
            <header class="jumbotron">
                <h1>Prototype of JayVee v3</h1>
                <p>If you have stumbed upon this page, then you have found my new website for my personal website. This site will be up with Node, Bakcbone, Bootstrap, Jquery, Modinzer, HTML5, CSS3 and more.</p>
            </header>
            <section id="displayZone" class="row">

            </section>
            <footer>

            </footer>
        </div>
        <!--Lib scripts-->
            <script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
            <script type="text/javascript" src="js/lib/handlebars.js"></script>
            <script type="text/javascript" src="js/lib/underscore-min.js"></script>
            <script type="text/javascript" src="js/lib/backbone-min.js"></script>
            <script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
            <script type="text/javascript" src="js/lib/modernizr.js"></script>

        <!--BB scripts-->
            <script type="text/javascript" src="js/views/index.js"></script>
            <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

App.JS文件

/*
Main JS app running Backbone
*/

var AppRouter = Backbone.Router.extend({ //Prevents Server Requests
    routes: {//Will match the url to the function
        "": "displayHome",
        "me" : "displayMe",
        "resume" : "displayResume",
        "projects" : "displayProjects",
        "contact" : "displayContactForm"
        //note colons ':' after url are variables
    },

    //Initializes when brought upon

    initialize: function (){
        this.homePage = new HomePage (
            {
                name: 'Joshua John Villahermosa',
                address: 'JC'
            }
        );
        console.log('App loaded...')
    },

    //Defined functions
    displayHome: function (){
        //var homePage = new HomePage({name: 'J***, address: 'JC'});
        $('#displayZone').html(homePage.render().el);
        //Note JQuery is best to pick up Id's
    },

    displayMe: function (){
        $('#displayZone').html('<p>Me page loaded</p>')
    },

    displayResume: function (){
        $('#displayZone').html('<p>Resume page loaded</p>')
    },

    displayProjects: function (){
        $('#displayZone').html('<p>Projects page loaded</p>')
    },

    displayContactForm: function (){
        $('#displayZone').html('<p>Form page loaded</p>')
    },
});

//Instatiate app
var app = new AppRouter();

$(function(){
    Backbone.history.start();

}）;

最后是index.js（HomePage视图所在的位置）

var HomePage = Backbone.View.extend({
    template: Handlebars.compile(
        '<article class="col-lg-9">'+
            '<h1>Web development at its current state ... for me</h1>'+
            '<p>This is my website, as this is a prototype I currently do not care about user design until I make the mark up or UI design for the website. This is purely experminetal and do not expect a lot of information</p>'+
        '</article>'+
        '<aside class="col-lg-3">'+
            '<h2>Contact</h2>'+
            '<address>'+
                '{{name}}<br>'+
                'Email: <a href="mailto: ***.**@*.com">***.**@*.com</a> <br>'+
                'Address: {{address}}'+
            '</address>'+
        '</aside>'
    ),

    render: function (){
        this.$el.html(this.template(this.options));//this.options will compile variables
        return this;
    }
});

再次，谢谢。

Backbone.JS错误：“未捕获的ReferenceError：未定义homePage”

0 个答案: