3

我正在开发一个应用程序，使用主干、下划线和 jquerymobile。按照 jqmobile 的方式，我有一个索引页面，它在特殊div的 s 标记中加载每个访问过的页面，并用属性标记data-role="page"。对于每个页面，我都有其相应的样式文件（或嵌入在stylehtml 标记中的代码片段）。我的问题是我的可样式化内容的名称开始发生冲突。另一件事是我不希望为每个页面加载不必要的样式文件。有什么方法可以只动态导入当前页面所需的 css 吗？

4

2 回答 2

6

我正在使用RequireJS和RequireCSS插件完成你所要求的。

这是我的一个观点的片段：

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 回答
0

一种方法是使用jquery（你 90% 已经在使用骨干网），以及它的load或getajax 函数，或其他任何东西，加上回调。

然后，如果需要，您可以从骨干应用程序中调用此类函数，并将<style>标签内的 css 作为模板注入到您的文档中。

或者我认为还有专门的 jquery 函数。

我能想到的另一种方法是使用require.js和它的插件（text我相信它有插件，它也可以让你加载你的 javascript 模板）。

于 2012-12-07T04:47:40.040 回答