尚未使用 RequireJS 文本插件为上下文加载模块名称

Question

我正在使用 text.js 加载模板，但在

上出现错误

require('text!templates/categories.html')

错误是

Uncaught Error: Module name "text!templates/categories.html_unnormalized2" has not been loaded yet for context:

看看我在模板的require加载过程中的视图部分，这是抛出错误的地方。

项目目录结构：

js
    /app
        ....
        views/categories
        templates/categories
    /lib
        /jquery
        /underscore
        /backbone
        /text
    /vendor
        /jquery-ui
        /fancytree

RequireJS 配置：

require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module

    shim: {

        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'jquery-ui': {
            exports: "$",
            deps: ['jquery']
        },  
        'fancytree': {
            deps: ['jquery-ui']
        }, 

    },
    paths: {
        'jquery': '../lib/jquery/jquery',
        'underscore': '../lib/underscore/underscore',
        'backbone': '../lib/backbone/backbone',     
        'text': '../lib/text/text',
        'jquery-ui': '../vendor/jquery-ui/jquery-ui',
        'fancytree': [      
            '../vendor/fancytree/fancytree',
            '../vendor/fancytree/fancytree.table'
        ],      
    },

    baseUrl: '/js/app',

});

查看：

define(['jquery-ui', 'fancytree', 'require'], function(ui, fancytree, require){

    'use strict';

    var $ = require('jquery'),
        _ = require('underscore'),  
        Backbone = require('backbone'),
        tpl = require('text!templates/categories.html') /* this line here produces error loading text.js*/,
        template = _.template(tpl);


    return Backbone.View.extend({
        el: $('#tree'),
        initialize: function() {

            this.listenTo( this.collection, 'reset add change remove', this.render, this );
            this.collection.fetch();
        },
        initFancyTree: function() {
            console.log('tree');
            $('#fancytree').fancytree();

        },
        render: function() {

            console.log(this.collection.toJSON())
            this.$el.html(template());
            //this.initFancyTree();
            return this;
        }
    });
})

Answer 1

您正在尝试通过异步加载模板来要求使用 CommonJS 语法的模块，RequireJS tries to emulate。

由于当您尝试使用它时它还没有准备好，它会抛出错误。

您只需要满足以下条件即可运行：

define([
    'jquery', 'underscore', 'backbone', 'jquery-ui', 'fancytree',
    'text!templates/categories.html'
], function(
    $, _, Backbone, ui, fancytree, 
    tpl
) {
    'use strict';
    return Backbone.View.extend({
        el: $('#tree'),
        template: _.template(tpl), // can be put here directly
        initialize: function() {
            // only has 3 parameters
            this.listenTo(this.collection, 'reset add change remove', this.render);
            this.collection.fetch();
        },
        render: function() {
            this.$el.html(this.template());
            return this;
        }
    });

});

其他信息（和类似问题）：

Dynamic require in RequireJS, getting "Module name has not been loaded yet for context" error?
Module name has not been loaded yet for context
Error: Module name "xxx" has not been loaded yet for context

尚未使用 RequireJS 文本插件为上下文加载模块名称

Module name has not been loaded yet for context using RequireJS text plugin

javascript

requirejs

backbone.js