15

requirejsとテキストプラグインを使用しようとしていますが、奇妙な問題があります。

私は2つのWebサーバーを持っています：

  1. localhost：3000 -CDNとして機能し、すべての静的ファイル（js、画像、css、テンプレート）があります
  2. localhost：3001 -server-RESTサーバーとして機能し、main.htmlファイルの1つのファイルのみを提供します

main.htmlファイルは、次の行を使用して2番目のサーバーからすべての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サーバーなど）からのテキストファイルの提供に問題が発生する理由を考えてみてください。

4

7 に答える 7

17

ドメイン間で作業しているときにテキストプラグインに問題があり、おそらく2つのローカルホストサーバーもこれにぶつかっています。

Webインスペクターで、require.jssome-content.html.jsがの代わりにのようなものをフェッチしようとしていることがわかりましたsome-content.html。

このコードを開発モードで実行していますか、それとも本番セットに組み込んでいますか？すべてをバンドルする場合、テキストプラグインでこれと同じクロスドメインの問題が発生することはありません。

これが私をひっくり返したAPIドキュメントの部分です（http://requirejs.org/docs/api.htmlから）：

baseUrlは、require.jsをロードするページとは異なるドメインのURLにすることができます。RequireJSスクリプトの読み込みは、ドメイン間で機能します。唯一の制限は、テキストによってロードされるテキストコンテンツにあります！プラグイン：これらのパスは、少なくとも開発中は、ページと同じドメインにある必要があります。最適化ツールはテキストをインライン化します！プラグインリソースなので、最適化ツールを使用した後、テキストを参照するリソースを使用できます。別のドメインのプラグインリソース。

これは、 CORSをサポートするブラウザーでこれを回避するのに役立つ記事です。

于 2012-07-02T13:36:00.280 に答える
17

テキストプラグインのドキュメントは、解決策のヒントを提供します.js。サフィックスを追加してスクリプトタグを介してロードすることなく、常にXHRを介してリモートリソースをフェッチするようにプラグインを構成することができます。簡単な解決策は、常にXHRを使用して強制することです。

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

リモートサーバーは正しいCORSヘッダーを設定する必要があり、これはセキュリティの問題である可能性があることに注意してください。したがって、これを使用する場合は、単にを返すのではなく、信頼できるURLに必要なチェックを追加してtrueください。

于 2014-06-26T10:10:42.260 に答える
4

テキストプラグインのコードを掘り下げました。

テキストプラグインは、別のドメインに存在するため、開発者がテキストテンプレートを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);
                });
            }
于 2012-05-16T12:22:59.053 に答える
0

r.jsオプティマイザーを実行し、テンプレートを.jsファイルにコンパイルする以外に、インターネットに投稿されたすべてのソリューションをハッキングしました。

一時的な回避策は、テンプレートをindex.htmlファイルと同じディレクトリに配置することです。もちろん、これで問題が解決するわけではありませんが、私のように停止している場合は、少なくとも再び移動することができます。

于 2012-11-19T21:53:38.527 に答える
0

同じ問題が発生しました。修正は、main.jsファイルが*.htmファイルと同じドメインからロードされていることを確認することでした。それらが異なる場合、requireは.jsをhtmlファイルに追加し、結果として404になります。

于 2013-09-03T17:15:13.077 に答える
0

このような設定は現在のテキストでは機能しません！プラグイン。私の解決策は、'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
});
于 2017-05-01T17:34:25.943 に答える
0

別の代替方法として、jQuery getメソッドを使用して、テンプレートのコンテンツをプレーンテキストとしてフェッチし、ハンドルバーでコンパイルすることができます。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);

    });

});
于 2018-12-12T12:07:09.403 に答える