Question

我使用下划线来模板化。我无法在我的页面上加载任何视图。我试图导航到页面，也在初始化函数中加载视图，但也没有用。

此代码大部分来自示例。我没有触及util函数，只是略微修改了main并添加了我自己的login.html

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

非常感谢任何帮助

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代码段和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>

修改

这是我的文件夹结构：

enter image description here

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

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部分，即内容区域。

enter image description here

Answer 1

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

Chrome.exe - 从文件中访问文件注意：您的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内，你可能会出错。

骨干视图不显示

2 个答案: