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 configs：

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

});

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

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

1 个答案: