0

我目前正在学习如何在 Backbone.JS 中编程，但我一直遇到以下错误：

未捕获的 ReferenceError：未定义主页

Uncaught ReferenceError: homePage is not defined app.js:30 Backbone.Router.extend.displayHome app.js:30（匿名函数）backbone-min.js:1（匿名函数）backbone-min.js:1 j.some。 j.any 下划线-min.js:5 h.extend.loadUrl 骨干-min.js:1 h.extend.checkUrl 骨干-min.js:1 x.event.dispatch jquery-1.10.2.min.js:5 v.句柄

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

//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>

应用程序.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（主页视图所在的位置）

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;
    }
});

再次谢谢你。

4

0 回答 0