Question

我正在开发一个应用程序，使用主干，下划线和jquerymobile。按照jqmobile的方式，我有一个索引页面，它在特殊的div标签中加载每个访问过的页面，标记有属性data-role="page"。对于每个页面，我都有相应的样式文件（或嵌入在style html标记中的代码片段）。我的问题是我的 stylable 的名字开始发生碰撞。另一件事是我不喜欢为每个页面加载不必要的样式文件。有没有办法动态导入当前页面所需的css？

Answer 1

我正在使用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 plugin removeClassRegEx here。

Answer 2

这样做的一种方法是使用 jquery （90％已经使用骨干网），以及load或get ajax功能，或其他任何方式，以及回调。

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

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

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

如何用骨干动态导入css？

2 个答案: