3

バックボーン、アンダースコア、jquerymobile を使用してアプリを開発しています。jqmobile のやり方に従って、アクセスしたすべてのページを特別なdivs タグにロードし、属性でフラグを立てたインデックス ページがありますdata-role="page"。各ページには、対応するスタイル ファイル (またはstylehtml タグに埋め込まれたコード スニペット) があります。私の問題は、私のスタイル可能なものの名前が衝突し始めたことです。もう1つは、ページごとに不要なスタイルファイルをロードしたくないということです。現在のページに必要な css のみを動的にインポートする方法はありますか?

4

2 に答える 2

6

RequireJSとRequireCSSプラグインを使用して、まさにあなたが求めていることを達成しています。

これが私の見解の1つからのスニペットです：

define([
  'jquery',
  'underscore',
  'backbone',
  'views/company/form',
  'text!templates/company/company.html',
  'css!../../../css/company/company',
], function($, _, Backbone, Form, pageTemplate) {

  var Page = Backbone.View.extend({
    ...
  });

  return Page;

});

行 7'css!../../../css/company/company'は、css ファイルがこのビューをロードするための要件になる場所です。

スタイルシートがロードされると、company.css実際のページの更新がないため、他の「ページ」がロードされてもブラウザーに表示されます。したがって、メインページビューで<html>要素のクラスを切り替えます。

// remove any old route-* classes existing on the html element
$('html').removeClassRegEx(/^route-.*/);
// add in the company's top-level class name
$('html').addClass('route-company');

そして、ページのすべてのページ固有のスタイルは、クラスcompanyにスコープされています。.route-company

jQuery プラグイン removeClassRegEx はこちらにあります。

于 2012-12-08T03:05:35.263 に答える