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

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?');

        }
    });

问题:

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

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

所以我不能加载require.js和text.js,它甚至在没有任何其他脚本的空白页面上给出了上述错误.

1. 在我使用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文件中,您只需加载requrejs,如此index.html中所示

<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'],...);

请参阅此处以获取完整示例.

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,所以如果你是第一次使用它,你将有一个工作环境.