3

良い一日、私はCurlJSを試していて、ほとんどのアイテムで成功しています。ただし、何らかの理由で、CurlJSを使用してCSSファイルをロードできません。

Firebug（ネットタブ）は、css.jsプラグインがロードされていることを示しています。これは、CSSファイルのロードに使用されていると思います。Firebug（コンソールタブ）は、ファイル内から「a.loadは関数ではありません」と表示しcurl.jsます。

のバージョン番号は「0.6.2」ですdefine.amd.curl。

私の質問は、CSSファイルがロードされないのはなぜですか？

私のコードは次のように見えます：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript">
        curl =
        {
            baseUrl: '.',
            paths:
                {
                    curl: 'Scripts/Curl'
                    //,'css!':'Style' //<-- I even tried this with no success
                },
            pluginPath: 'Scripts/Curl/curl/plugin'
        };
    </script>

    <script src="Scripts/Curl/curl.js" type="text/javascript"></script>

    <script type="text/javascript">
        curl(['css!Style/Test.css'])
            .then(
            function (css) {
                if (css)
                    alert("It Works!");
            },
            function (error) {
                alert("It failed!");
            });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div class="test" style="border: 1px solid black; text-align: center; width: 400px;">
            If the CSS loads this text will be RED.
        </div>
    </form>
</body>
</html>

コンソールタブ：
これはFirebugsConsoleのスクリーンショットです

ネットタブ：
これはFirebugsNetのスクリーンショットです

更新：
次のJavaScriptを使用して、特定のモジュールのCSS依存関係を読み込むことができましたが、Curlsのネイティブ機能を使用したいと思います。

var head = document.getElementsByTagName('head')[0];
var files = ['/Style/Test.css']; //<-- my list of files
for (var i = 0, l = files.length; i < l; i++) {
    var link = document.createElement('link');
    link.href = files[i];
    link.rel = "stylesheet";
    link.type = "text/css";
    head.appendChild(link);
}
4

3 に答える 3

1

コード スニペットにいくつか問題があります。

  1. 成功コールバックの署名には 2 つのパラメーター ($、css) がありますが、必要なモジュールは "Test.css" 1 つだけです。
  2. スクリプト要素を介してモジュールをロードしようとしないでください。それはうまくいきません。

表示されているコード スニペットでは、「a.load は関数ではありません」というメッセージを説明できません。私には見えない何か他のことが起こっているに違いない。

[更新 スクリーン ショットを投稿した後:] Firebug のスクリーン ショットに表示されている小さなコードは、css.js ファイルが最小化/圧縮されているように見えます。個別に最小化することを意図したものではありませんでした。curl の make ユーティリティを使用して、css で curl のバージョンをビルドしてください。プラグインをベイクするか、既に css にベイクインしている curl/dist のバージョンを取得してください! プラグイン モジュール。これで問題は解決するはずです。

于 2012-04-16T20:41:56.763 に答える
0

別のcurl.jsファイルを使用してください...kitchen-sinkバージョンにはプラグインが含まれていますが、他のバージョンには含まれていません。

https://github.com/cujojs/curl/tree/master/dist/curl-kitchen-sink

于 2012-09-14T20:05:27.850 に答える
0

私は CurlJS に精通していませんが、CSS ファイルへの相対パスに関係している可能性があります。

置き換えてみてください：

curl(['css!Style/Test.css'])

どちらかと：

curl(['css!./Style/Test.css'])

また：

curl(['css!../../Style/Test.css'])
于 2012-04-16T13:41:16.920 に答える