主干视图不显示

Question

我在模板中使用下划线。我无法在我的页面上加载任何视图。我试图导航到该页面，并且也在初始化函数中加载了视图，但这也不起作用。

大部分代码取自示例。 util函数我没有接触，只是稍微修改了main，添加了自己的login.html

当我导航到该 url 时，我收到“未找到此网页”错误，当我将其放入初始化函数时，没有任何变化。

任何帮助将不胜感激

ma​​in.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 sn-p 和 js 导入

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

编辑

这是我的文件夹结构：

在开发者工具中我有这个错误：

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

这是网站的图片，登录应该加载到 middel 部分，即内容区域。

Answer 1

您需要使用以下命令打开您的 chrome。 （按窗口+R）

Chrome.exe --allow-file-access-from-files 注意：您的 chrome 不得打开。运行此命令时，chrome 会自动打开。

如果您在命令提示符下输入此命令，请选择您的 chrome 安装目录，然后使用此命令。

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

Answer 2

您观看的视频已经过时了。在那之后，BackboneJS 发生了重大变化。

您收到page not found 错误，这可能是因为login.html 放置在错误的目录中。它应该放在一个文件夹调用tpl，你可能弄错了。