javascript - How to load html content dynamically with RequireJS - Stack Overflow

admin管理员组

文章数量:1345884

I want to load a html content with RequireJS like this:

define(function (require) {

"use strict";

return function (id) {
     var url = 'text!screens/' + id + '.html';
     var html = require(url);
}; });

But I get this error: Error: Module name "text!screens/home.html_unnormalized2" has not been loaded yet for context: _

If I try it in this way:

define(function (require) {

"use strict";

return function () {
     var html = require('text!screens/home.html');
}; });

everything is ok. But this approach isn't very nice due to hardcore tipped url. How can I solve this?

I want to load a html content with RequireJS like this:

define(function (require) {

"use strict";

return function (id) {
     var url = 'text!screens/' + id + '.html';
     var html = require(url);
}; });

But I get this error: Error: Module name "text!screens/home.html_unnormalized2" has not been loaded yet for context: _

If I try it in this way:

define(function (require) {

"use strict";

return function () {
     var html = require('text!screens/home.html');
}; });

everything is ok. But this approach isn't very nice due to hardcore tipped url. How can I solve this?

• javascript
• requirejs
• requirejs-text

Share Improve this question Follow edited Oct 15, 2013 at 6:30 Dareon asked Oct 15, 2013 at 3:58 DareonDareon 38444 silver badges1414 bronze badges 2

• How are you using the first code block? (i.e. where is that code that has the "home" string? – Hamza Kubba Commented Oct 15, 2013 at 4:01
• It is used as a dependency in another module and there it will be called like a function: load(id). – Dareon Commented Oct 15, 2013 at 4:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Inline parametric require calls can only run asynchronously for modules that have not been loaded yet, as is your case. The principle is (also note url is in an array):

var url = 'text!screens/' + id + '.html';
require([url],
    function(text) {
        // use text
    },
    function(err) { // OPTIONAL BUT GOOD PRACTICE
        // handle error
    }
);

This has the inconvenience of not beign able to return the value immediately. Also take a look at the principle of promises (implemented by many libraries, jQuery too).

本文标签： javascriptHow to load html content dynamically with RequireJSStack Overflow