如何用骨干动态导入css？

Question

如何用骨干动态导入css？

Thr*_*oze 3 jquery-mobile backbone.js underscore.js

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

Answer 1

bej*_*bee 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;

});

Run Code Online (Sandbox Code Playgroud)

第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');

Run Code Online (Sandbox Code Playgroud)

并且我的页面特定于页面的所有样式company都限定在.route-company类中.

你可以在这里找到jQuery插件removeClassRegEx.

归档时间：	12 年，10 月前
查看次数：	4089 次
最近记录：	12 年，10 月前