了解如何使用 require js 结合文本 js 在主干应用程序中加载 html 模板

Question

我正在学习backbone js，正在尝试做一个小项目。

在页面中，我从 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?');

        }
    });

问题：

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

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

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

1. 在我使 require js 与文本 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 在哪里加载它的引导文件，在这种情况下，它位于“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 ) {

});

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

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

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