9

我正在学习骨干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?');

        }
    });

问题：

  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);
    }
});

谢谢！

4

2 回答 2

13

在您的 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”下

您可以在此处找到该文件。

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

require.config({ ... });

配置requirejs。

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

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

有关完整示例，请参见此处。

于 2013-10-22T18:06:17.053 回答
6

当你使用 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，因此如果您是第一次使用，您将拥有一个工作设置。

于 2013-10-22T18:02:02.110 回答