jquery-mobile之如何使用 backbone 动态导入 css
我正在开发一个应用程序,使用主干、下划线和 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
类。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。