2012-12-07 4 views
3

나는 백본, 밑줄 및 jquerymobile을 사용하여 응용 프로그램을 개발 중입니다. jqmobile의 방식에 따라, 나는 방문한 모든 페이지를 특별한 div 태그로로드하고, data-role="page"이라는 속성으로 플래그 된 인덱스 페이지를 가지고있다. 각 페이지마다 해당 스타일 파일 (또는 style HTML 태그에 삽입 된 코드 스 니펫)이 있습니다. 내 문제는 내 스타일의 물건이 충돌하기 시작했기 때문입니다. 다른 것은 내가 각 페이지에 대해 불필요한 스타일 파일을로드하는 것을 싫어한다는 것입니다. 현재 페이지에 필요한 CSS 만 동적으로 가져올 수있는 방법이 있습니까? 그 일의백본과 함께 CSS를 동적으로 가져 오는 방법은 무엇입니까?

답변

6

나는 정확히 RequireJSRequireCSS 플러그인을 사용하여 묻는 것을 수행하고 있습니다. CSS 파일이보기를로드하기위한 요구된다 어디 'css!../../../css/company/company'이며,

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 호선 : 여기

내보기 중 하나에서 미리보기입니다.

company.css 스타일 시트가로드되면 실제 페이지 새로 고침이 없기 때문에 다른 "페이지"가로드 될 때도 브라우저에 표시됩니다.

// 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 클래스에 범위가된다 : 따라서 나는 내 주요 페이지 뷰가 <html> 요소에 클래스를 전환 할 수 있습니다.

jQuery plugin removeClassRegEx here을 찾을 수 있습니다.

0

한 가지 방법은 (당신이 90 %가 이미 백본으로 사용하는) JQuery와, 그 load 또는 get 아약스 기능, 또는 무엇이든, 플러스 콜백입니다.

그런 다음 필요한 경우 백본 앱에서 이러한 기능을 호출하고 해당 CSS를 템플릿에 <style> 태그 안에 삽입하면됩니다.

또는 특수화 된 jquery 기능이 있다고 생각합니다. 내가 require.js 함께 할 것입니다 그 일을 생각할 수 있으며이 플러그인의

또 다른 방법은 (내가이 또한 자바 스크립트 템플릿을로드 할 수있게하는, 생각, text 플러그인이있다).

관련 문제