Question

我正在尝试学习Backbone.js外部模板而不使用像this这样的Require.js。但模板没有显示，div容器仍然是空的，虽然我没有发现错误。这是我正在处理的代码（我已经包含了他们的路径，以防万一）：

scripts/main.js，用作我的路由器

var AppRouter = Backbone.Router.extend({
routes: {
    "profile": "profile",
    "view": "view",
    "else": "notFound"
},

profile: function() {
     if (!this.profileView) {
        this.profileView = new ProfileView();
     }
     $('#global-content').html(this.profileView.el);
}
});

utils.loadTpl([
    'ProfileView'],
        function() {
            app = new AppRouter();
            Backbone.history.start();
        }
);

scripts/utils.js，用于加载模板

window.utils = {
loadTpl: function(views, callback) {

    var deferreds = [];

    $.each(views, function(index, view) {
        if (window[view]) {
            deferreds.push($.get('templates/' + view + '.html', function(data) {
                window[view].prototype.template = _.template(data);
            }));
        } else {
            alert(view + " not found");
        }
    });

    $.when.apply(null, deferreds).done(callback);
}
};

scripts/views/profile.js，view也有相同的代码

window.ProfileView = Backbone.View.extend({
initialize: function() {
    this.render();
},
render: function() {
    $(this.el).html(this.template);
    return this;
}
});

然后我将模板放在与scripts/

相同的父文件夹中

我已经尝试在控制台中运行它们并且它们工作得很好，如果这有帮助

profileView = new ProfileView()render();

profileView.el - 正确地为我提供了profile.html模板

我读过有关Require.js但我想在没有它的情况下这样做。

感谢

Answer 1

请检查此行

$(this.el).html(this.template);

应该替换为

$(this.el).html(this.template());

但是如果你说这有效，我认为这可能是其他问题

profileView = new ProfileView().render();
console.log(profileView.el);

Answer 2

一切都运作良好。

问题出在index.html之内，我用了<div id='global-container'> 但在main.js我呼吁#global-content

Backbone js，外部模板，没有需要

2 个答案: