Javascript BackboneJS-显示外部模板_Javascript_Jquery_Html_Backbone.js_Requirejs

Javascript BackboneJS-显示外部模板

javascript jquery html backbone.js requirejs

Javascript BackboneJS-显示外部模板,javascript,jquery,html,backbone.js,requirejs,Javascript,Jquery,Html,Backbone.js,Requirejs,我在显示外部模板时遇到一些问题。到目前为止，我有main.js文件、index.html文件、header_content.html文件（带有一些简单的html代码）、header.js视图文件和tpl.js文件 my index.html非常简单，如下所示： <!DOCTYPE html> <html lang="en"> <head> <title>Backbone project</title> <meta charset

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

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

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;

});

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: '_'
        }
    }
});

然后是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文件，如下所示：

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

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;

});

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: '_'
        }
    }
});

定义(
['jquery'，'lodash'，'backbone']，
函数（$，389;，主干）{
var tpl={
模板：{}，
loadTemplates:函数（名称、回调）{
var=这个；
var loadTemplate=函数（索引）{
变量名称=名称[索引]；
log（'加载模板：'+名称）；
$.get（'templates/'+name+'.html'，函数（数据）{
模板[名称]=数据；
索引++；
if（索引


当我运行此程序时，会出现几个脚本错误：-/
我只需要在#container Div中显示标题_content.html模板
我做错了什么？
看起来您没有包含require.config（）
调用，所以您可能需要设置一个。否则，require不知道在哪里查找主干、jQuery等。您希望在main.js中第一次调用require（）
之前执行此操作
你会想要这样的东西：
<!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>

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;

});

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
部分处理主干和下划线不使用define（）
来定义它们自己和声明它们的依赖关系这一事实
您可以阅读有关配置选项的更多信息
希望这能有所帮助。
您遇到了什么样的错误？@YuruiRayZhang嗯，我遇到了几个错误，我认为我的代码总体上有问题。尤其是main.js文件似乎引起了最多的问题。我在requirejs中得到了示例“Error:Script Error”，在requirejs中得到了示例“Error:Script Error”，在模块：主干中得到了加载超时，在requirejs中也得到了示例，“tpl未定义”等等。。。呼：-/Hm……我对requirejs不太了解。但是，请确保backbonejs的加载路径配置正确。另外，请确保在backbone.js之前加载下划线.js。