Question

我在显示外部模板时遇到一些问题。到目前为止，我有main.js文件，index.html文件，header_content.html文件（带有一些简单的html代码），header.js视图文件和tpl.js文件。

我的index.html很简单，看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Backbone project</title> 
<meta charset="utf-8"/>
<link rel="stylesheet/less" type="text/css" href="css/style.less">
<link rel="stylesheet/less" type="text/css" href="css/admin.less">
<script data-main="js/config" src="js/libs/require.min.js"></script>    
</head>
<body>
<div id="container"></div>
</body>
</html>

接下来，有main.js文件：

require([
'jquery',
'lodash',
'backbone',
'utils/tpl',
'views/header'
 ],

 function($, _, Backbone, HeaderMenuView, tpl) {

IndexView = Backbone.View.extend({
    initialize: function(){
       this.el.html(); // is this right?
    }
});

var index_view = new IndexView({el:'#container'});

tpl.loadTemplates(['header'], function() {
    window.app = new IndexView({el:'#container'});
    Backbone.history.start();
});

});

然后我有header.js视图文件：

define(
['jquery', 'lodash', 'backbone', 'utils/tpl'],

function($, _, Backbone, tpl) {

var HeaderMenuView = Backbone.View.extend({

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

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

});

return HeaderMenuView;

});

作为最后一个文件，我有tpl.js文件，如下所示：

define(
['jquery', 'lodash', 'backbone'],

function($, _, Backbone) {

var tpl = {

    templates: {},

    loadTemplates: function(names, callback) {

        var that = this;

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

        loadTemplate(0);
    },

    get: function(name) {
        return this.templates[name];
    }

};

return tpl;

});

当我运行这个时，我得到了几个脚本错误： - / 我想要的是要在#container Div。

中显示的header_content.html模板

我做错了什么？

Answer 1

看起来你没有加入require.config()来电，所以你可能需要设置一个。{p>否则，require不知道在哪里寻找Backbone，jQuery等。您希望在main.js中第一次require()调用之前执行此操作。

你会想要这样的东西：

require.config({
    baseUrl: '.',
    paths: {
        'jquery': '../lib/jquery.min',
        'underscore': '../lib/underscore.min',
        'backbone': '../lib/backbone.min'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
    }
});

shim部分处理Backbone和Underscore不使用define()来定义自己并声明其依赖关系的事实。

您可以阅读有关配置选项here的更多信息。

希望这有帮助。

BackboneJS - 显示外部模板

1 个答案: