backbone.js require.js文本插件将“.js”添加到文件名

sczxawaw  于 2022-11-10  发布在  其他
关注(0)|答案(7)|浏览(135)

我试图与requirejs和文本插件工作,我有奇怪的问题。
我有两台Web服务器:
1.localhost:3000-充当CDN并具有所有静态文件:js,图像,css和模板
1.localhost:3001- server -充当REST服务器,并且仅为一个文件(main.html文件)提供服务
main.html文件使用以下行从第二个服务器加载所有js文件:

<script data-main="http://localhost:3000/js/main" 
        src="http://localhost:3000/lib/require-jquery.js"></script>

由于某种原因,当使用requirejs文本插件时,他在导航到localhost:3001时向模板添加了".js"后缀
我使用以下语法:

define ['jquery','backbone','underscore','models/model','text!templates/main.html', 
        'views/navigation', 'views/player', 'views/content', 'views/header']

当我导航到localhost:3000时,它工作正常。
你能想到任何原因,文本插件会有问题,从远程服务器(例如,CDN服务器)的文本文件?

8ftvxx2r

8ftvxx2r1#

文本插件的文档给出了解决方案的提示:可以配置插件,使其始终通过XHR获取远程资源,而不附加.js后缀并通过脚本标记加载。简单的解决方案是始终强制使用XHR:

requirejs.config({
   config: {
      text: {
         useXhr: function (url, protocol, hostname, port) {
            return true;
         }
      }
   }
});

请注意,远程服务器需要设置正确的CORS头,这可能是一个安全问题。因此,在使用此方法时,请添加对可信URL的必要检查,而不是简单地返回true

2fjabf4q

2fjabf4q2#

我有麻烦的文本插件时,跨域工作,也许你的两个本地主机服务器也打这个。
在web检查器中,我看到require.js试图获取some-content.html.js之类的内容,而不是some-content.html
你是在开发模式下运行这段代码,还是构建到一个生产环境中?当你把所有东西都捆绑起来的时候,文本插件应该不会有同样的跨域问题。
下面是API文档部分(来自http://requirejs.org/docs/api.html):
baseUrl可以是与将要加载require.js的页面不同的域上的URL。RequireJS脚本加载跨域工作。唯一的限制是由text!plugins加载的文本内容:这些路径应该与页面在同一个域中,至少在开发过程中是这样。2优化工具将内联text!plugin资源,因此在使用优化工具后,您可以使用从另一个域引用text!plugin资源的资源。
Here's an article,它帮助我在支持CORS的浏览器上解决了这个问题:

jbose2ul

jbose2ul3#

我已经深入研究了文本插件的代码。
我发现这个文本插件假设开发者将文本模板转换为html,因为它驻留在不同的域中。
我已经改变了文本插件的代码,不承担它。
有人认为我做错了什么吗
插件的原始代码:

//Load the text. Use XHR if possible and in a browser.
            if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
                text.get(url, function (content) {
                    text.finishLoad(name, parsed.strip, content, onLoad, config);
                });
            } else {
                //Need to fetch the resource across domains. Assume
                //the resource has been optimized into a JS module. Fetch
                //by the module name + extension, but do not include the
                //!strip part to avoid file system issues.
                req([nonStripName], function (content) {
                    text.finishLoad(parsed.moduleName + '.' + parsed.ext,
                                    parsed.strip, content, onLoad, config);
                });
            }
kninwzqo

kninwzqo4#

除了运行r.js优化器和将我的模板编译成.js文件外,我已经破解了我在互联网上看到的每一个解决方案。
一个临时的解决方法是把你的模板放在index.html文件所在的目录下,当然这并不能解决问题,但是如果你像我一样停滞不前,那么这至少可以让你重新开始。

pdsfdshx

pdsfdshx5#

我遇到了同样的问题,修复方法是确保main.js文件与 *.htm文件从同一个域加载。当它们不同时,require会将.js附加到html文件,导致404s。

e5nqia27

e5nqia276#

这样的配置在当前的text!插件中不起作用。我的解决方案是在'text'模块中覆盖useXhr方法

require(["text"], function (text)
{   if( location.port == '4502' || location.port == '4503' )// AEM env-t
        text.useXhr = function(){ return true; }
    require(["loader/widget/WidgetLoader"]); // dependent on HTML templates by text! plugin
});
tag5nh1u

tag5nh1u7#

作为另一种替代方法,您可以使用jQuery get方法来获取纯文本格式的模板内容,然后使用Handlebars对其进行编译。我在论坛上花了几个小时阅读有关require.js文本插件和CORS的问题后,将此解决方案作为最后的手段。下面是一个示例:
模板:

<span class="badge badge-pill badge-danger">Default</span>
<div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
        {{body}}
    </div>
</div>

js脚本:

var deps = [
    'jquery',
    'handlebars',
];

require(deps, function($, handlebars){

    var template = 'https://your_site/raw.templates/basic.handlebars';

    $.get(template, function( data, textStatus, jqxhr ) {
        var Handlebars = handlebars;

        var basicTemplate = Handlebars.compile(data);

        var context = {title: "My New Post", body: "This is my first post!"};

        var html = basicTemplate(context);

        var grid = document.createElement('div');
        grid.setAttribute('id', 'itemsGrid');
        grid.innerHTML = html;
        document.body.appendChild(grid);

    });

});

相关问题