2

HTMLをページにロードするために、requireJSでテキストプラグインを使用しています。これを担当するモジュールを定義しました：

define(['jquery', 'text!/path/to/template/template_name.html'], function($, rciTpl){

モジュール内には、ajax 呼び出しの広告アイテムから DOM へのデータを受け取った後、次のメソッドがあります。

var buffer = $.map(data, function(d, i){
            //clone the template;
            var tpl = template.clone();

            //set the url
            tpl.find('a.lt, a.la').attr('href', d.url);

            //set the title
            tpl.find('a.lt').text(d.title);

            //return the raw node
            return(tpl.get());
        });

$('#myContainer').append(buffer);

これまでのところ、すべて正常に動作しています。テンプレートに画像を動的に追加しようとすると、問題が発生します。このようなもの：

tpl.find('img').attr('src', 'item_img_path.svg');

ブラウザーのコンソールに表示されるエラーは、「リソースはイメージとして解釈されましたが、MIME タイプ text/html で転送されました」です。

また、自分の仕事を達成するためのさまざまなアプローチにも心を開いています。

ありがとう。

4

2 に答える 2

1

プラグインのドキュメントにあるように、いくつかの制限があります https://github.com/requirejs/text#xhr-restrictions

また、名前自体が、テキストではない他のリソースの難しさを示唆しています。

別のアプローチは、モジュールのスクリプトの場所を特定し、その場所にあるイメージにリクエストを発行することです。RequireJSの観点からは直感に反するように見えますが、 OpenLayersで動作しているように見えます

OpenLayersは私のアプリの依存関係です。shimconfigで設定しました。イメージとスタイルを見つける方法。そのコードを読んで、私はそれがこのいわゆるgetScriptLocationメソッドを使用していることを学びました:

_getScriptLocation: (function() {
    var r = new RegExp("(^|(.*?\\/))(OpenLayers[^\\/]*?\\.js)(\\?|$)"),
        s = document.getElementsByTagName('script'),
        src, m, l = "";
    for(var i=0, len=s.length; i<len; i++) {
        src = s[i].getAttribute('src');
        if(src) {
            m = src.match(r);
            if(m) {
                l = m[1];
                break;
            }
        }
    }
    return (function() { return l; });
})()

使用するCSSを決定する方法を確認します。

this.theme = OpenLayers._getScriptLocation() + 'theme/default/style.css';

私はあなたがアイデアを得たと思います。

考えられる問題は、最適化されたバージョンです。その場合どうなるかはまだわかりません。

于 2014-07-26T04:41:57.590 に答える