jquery-mobile之如何使用 backbone 动态导入 css

cyq1162 阅读:11 2024-10-01 17:34:08 评论:0

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

请您参考如下方法:

我正在使用 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 文件成为加载此 View 的要求的地方。

一旦company.css样式表已加载,即使其他“页面”已加载,它也会在浏览器中,因为没有实际的页面刷新。因此,我的主页 View 在 <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 .


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号