Question

我正在学习骨干js，试图做一个小项目。

在te页面中，我从cloudflare CDN加载了require.js和text.js

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js">//</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.js">//</script>

我制作了一个名为“Boxes”的骨干视图：

var Boxes = Backbone.View.extend({

        // Choose an element.
        el : '.content',

        render : function () {

            // Captur "this" -> the backbone view itself.
            var that = this;

            $(this.el).html('how do I load a html template here?');

        }
    });

问题：

当我将text.js插件添加到页面时，出现以下错误：

不匹配的匿名define（）模块：function（module）{'use strict'; ......

所以我不能加载require.js和text.js，即使在没有任何其他脚本的空白页面上也会出现上述错误。

在我使用js处理require js后，如何为该视图加载html模板？

现在，当我在index.html页面中内联编写模板时，我知道该怎么做。

我这样做：

var Boxes = Backbone.View.extend({

    el : '.content',

    render : function () {

        var that = this; // This backbone view

        var template = _.template($('#user-list-template').html(), {});

        that.$el.html(template);
    }
});

谢谢！

Answer 1

在您的HTML文件中，您只需加载如此index.html

中所示的requrejs

<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>

在上面，“data-main”告诉requirejs加载其bootstrap文件的位置，在这种情况下，它位于“js / main.js”下

您可以在here。

中找到该文件

在main.js文件中，您需要指定

require.config({ ... });

配置requirejs。

之后，您可以使用“define（）/ require（）”来加载模板，如...

define(['text!../../templates/app/content.about.html'],...);

请参阅此处查看a complete example.

Answer 2

使用require.js时，只在页面中使用一个脚本标记。其他所有内容都由Require.js加载。

要使用插件，您需要在require.config

中对其进行配置

require.config({
    paths: {
        text: "path/to/text"
    }
});

然后在你的模块中，你只需要调用它：

define([
    "text!path/to/tpl"
], function( tplString ) {

});

但请注意，如果您正在管理模板，最好是加载预编译的模板。 Text插件只返回一个字符串，这对优化并不是很好，并强制您重复模板编译逻辑。你应该使用模板加载器插件，对于下划线/ lodash微模板，我推荐你这个：https://github.com/tbranyen/lodash-template-loader

如果你想要一个使用Require.js和Backbone的应用程序的例子，你应该检查Backbone-Boilerplate：https://github.com/backbone-boilerplate/backbone-boilerplate

Backbone-Boilerplate是使用Backbone开发的最佳实践快速设置项目的好方法。此外，它还广泛使用AMD，因此如果您是第一次使用它，您将拥有一个工作环境。

了解如何使用需要js结合文本js来加载骨干应用程序内的html模板

2 个答案: