Backbone view not displaying

Question

I am using underscore for the templating. I cant get any views to load on my page. I have tried to navigate to the page and also too load the view in the initialize function and that didnt work either.

Most of this code is taken from the example. I have not touched the util function, just slightly modified the main and added my own login.html

When I navigate to the url I get a "This web page has not been found" error and when i place it into the initialize function nothing changes.

Any help would be greatly appreciated

main.js

Backbone.View.prototype.close = function () {
    console.log('Closing view ' + this);
    if (this.beforeClose) {
        this.beforeClose();
    }
    this.remove();
    this.unbind();
};
var AppRouter = Backbone.Router.extend({
    initialize: function() {
       // $('#contents').html( new LoginView().render().el );
    },
    routes: {
        ""          : "list",
        "login"     : "login"
    },
    list: function() {

    },
    showView: function(selector, view) {
        if (this.currentView)
            this.currentView.close();
        $(selector).html(view.render().el);
        this.currentView = view;
        return view;
    },
    login: function(){
        app.showView( '#contents', new LoginView() );
    }
});
tpl.loadTemplates(['login'], function() {
    app = new AppRouter();
    Backbone.history.start();
});

util.js

tpl = {

    // Hash of preloaded templates for the app
    templates: {},

    // Recursively pre-load all the templates for the app.
    // This implementation should be changed in a production environment. All the template files should be
    // concatenated in a single file.
    loadTemplates: function(names, callback) {

        var that = this;

        var loadTemplate = function(index) {
            var name = names[index];
            console.log('Loading template: ' + name);
            $.get('tpl/' + name + '.html', function(data) {
                that.templates[name] = data;
                index++;
                if (index < names.length) {
                    loadTemplate(index);
                } else {
                    callback();
                }
            });
        }

        loadTemplate(0);
    },

    // Get template by name from hash of preloaded templates
    get: function(name) {
        return this.templates[name];
    }

};

login.js

window.LoginView = Backbone.View.extend({

    initialize: function() {
        this.template = _.template(tpl.get('login'));
    },

    render: function(eventName) {
        $(this.el).html(this.template());
        return this;
    },


});

login.html

<div class="row">
                <div class="col-lg-12">
                     <h1 class="page-header">Login</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>


              <div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please sign in</h3>
                </div>
                <div class="panel-body">
                    <form accept-charset="UTF-8" role="form">
                    <fieldset>
                        <div class="form-group">
                            <input class="form-control" placeholder="E-mail" name="email" type="text">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="Password" name="password" type="password" value="">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                            </label>
                        </div>
                        <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
                    </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

index.html snippet and js imports

<div id="page-wrapper">
            <div id="contents">

            </div>


        </div>
<script src="js/utils.js"></script>
<script src="js/views/header.js"></script>
<script src="js/views/login.js"></script>
<script src="js/main.js"></script>

EDIT

Here is my folder strucutre:

In developer tools I have this error:

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.  file:///C:/Users/Bawn92/Desktop/FYP/Website/WebContent/tpl/login.html

Here is an image of the site, the login should load in the middel section which is the contents area.

Answer 1

You need to open your chrome with following command. (Press window+R)

Chrome.exe --allow-file-access-from-files Note : Your chrome must not be open. When you run this command chrome will open automatically.

If you are entering this command in command prompt then select your chrome installation directory then use this command.

Source: Angularjs: Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin in chrome