5

私は次のようなテンプレートを作成しました：

// template.tpl
<div>
    <input id="an_input"></input>
</div>

といくつかのCSS：

// stylesheet.css
input {
    background: #000000;
}

最後に、これはスリム化されたモジュールです。

define([
    'jquery',
    'text!template.tpl',
    'text!styleshet.css'
], function($, html, css){      
    var view = $('#sample_div');
    view.append($(html));

    var regex = /^([^\s\}])/gm;

    var styles = css.replace(regex, '#'+view.attr('id')+' $1');
    var style = $('<style>\n'+styles+'\n</style>');
    view.prepend(style);
});

基本的に発生しているのは、テンプレートが読み込まれ、に配置されていること#sample_divです。CSSファイルがテキストとしてロードされた直後に、すべてのアイテムの前にビューのIDが付けられます。

CSSのプレフィックスが付けられると、スタイルタグが作成され、ビュー内に配置されます。

さて、これは完全に機能します。OK、きれいではありません。また、エラーの余地もあまりありません。ただし、このコードは、必要なものを示すために作成しました。

ビュー固有のスタイルシートを使用してテンプレートをロードできるようにする必要があります。この場合、シート内のスタイルはビューにのみ適用され、グローバルスタイルのみをオーバーライドします。

上記の例の問題は、それがハック、CSSに対する正規表現、および新しいスタイルタグの構築であるということです。これは、私がやりたい方法ではありません。私はよりクリーンなソリューションを求めてjavascriptCSSパーサーを調べていましたが、JSCSSPは私の目に留まりましたが、グローバル名前空間に多くの関数を配置し、jquery.parsecssは既にドキュメント内にあるスタイルでのみ機能するようです。

誰かが私が達成しようとしていることについて何か経験がありますか？

4

1 に答える 1

3

そこにあるほとんどのローダーには、挿入を処理する CSS プラグインがあります。

RequireJS CSS プラグイン https://github.com/tyt2y3/requirejs-css-plugin

CurlJS CSS プラグインは、メインのディストリビューションにバンドルされています: https://github.com/cujojs/curl/tree/master/dist

于 2013-02-20T06:37:53.503 に答える