Bez bootstrap z konkretnych tras w Meteor

Miałem nadzieję, ktoś może dać jakieś wejście na ten temat,Bez bootstrap z konkretnych tras w Meteor

Tworzę aplikację meteorów w których chciałbym użyć bootstrap do tworzenia środowiska administratora, ale użytkownik naprzeciwko strony za pomocą niestandardowych css. Kiedy dodaję pakiet bootstrap do mojej aplikacji za pomocą meteora, który jest dostępny na każdej stronie, czy istnieje sposób na ograniczenie ładowania bootstrapu do tras znajdujących się w "/ admin"?

Źródło

2013-07-16 Jasper2_0

Po dodaniu pakietu bootstrap nie jest to możliwe. Możesz jednak dodać bootstrap csses do katalogu public, a następnie wczytać je w podtemplate nagłówka, który będzie renderowany tylko wtedy, gdy będziesz w desce rozdzielczej.

EDIT

Ale jak byś go o tworzenie oddzielnych szablonów głowie?

proste:

<head> 
    ... 
    {{> adminHeader}} 
    ... 
</head> 


<template name="adminHeader"> 
    {{#if adminPage}} 
     ... // Put links to bootstrap here 
    {{/if}} 
</template> 



Template.adminHeader.adminPage = function() { 
    return Session.get('adminPage'); 
} 


Meteor.router.add({ 
    '/admin': function() { 
     Session.set('adminPage', true); 
     ... 
    } 
});

Źródło

2013-07-16 21:44:15

Ale jak byś poszła do tworzenia oddzielnych szablonów głów? Z tego co rozumiem, Meteor skanuje wszystkie pliki .html w twoim projekcie, a następnie łączy wszystkie znalezione tagi w jeden , który jest dostarczany użytkownikowi? (np. umieszczenie linku do StyleA.css w szablonie A i link do StyleB.css w szablonie B nadal powoduje, że obie głowy zostają rozbite razem, a meteor ładuje zarówno StyleA.css, jak i StyleB.css ... –

Przykro mi, ale według mojej wiedzy nie jest to obecnie możliwe z meteorytem Zobacz także ten numer [tutaj] (https://github.com/meteor/meteor/issues/266) .Na przykład stworzyłem [przykładowy projekt] (https: //github.com/Jasper2-0/meteor-handlebars-head/) pokazując, że to podejście spowoduje, że Twój tag {{> handlebar}} zostanie bezpośrednio wprowadzony do twojego html ... –

OŚWIADCZENIE: Jestem pewny sposób na 'meteor', aby to zrobić, więc o to w jaki sposób mogę to zrobić z czystym JS.

jQuery

$("link[href='bootstrap.css']").remove();

JS - zgłosił javascriptkit

function removejscssfile(filename, filetype){ 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for 
var allsuspects=document.getElementsByTagName(targetelement) 
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
    allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild() 
} 
} 

removejscssfile("bootstrap.css", "css")

jednak, że robi to zakończyć usunąć go ze strony. Nie jestem pewien, czy meteor spróbuje go odczytać, gdy użytkownik przejdzie na inną stronę. Jeśli to nie jest automatycznie odczytywane, oznacza to, że problem z ładowaniem początkowym nie jest uwzględniany, gdy ktoś przechodzi z sekcji administracyjnej do głównej witryny, co mogłoby zepsuć wygląd witryny.

Sposób chciałbym ominąć że byłoby wyłączyć i włączyć stylów:

Meteor.autorun(function(){ 
    if(Session.get('nobootstrap')){ 
    $("link[href='bootstrap.css']").disabled = true; 
    }else{ 
    $("link[href='bootstrap.css']").disabled = false; 
    } 
});

Tam moi być inne zasoby bootstrap, które mogą wymagać usunięcia, spojrzeć na to, co Twoja strona się ładuje.

użyć jQuery w ten sam sposób, ale dla plików JavaScript, należy pamiętać, aby zmienić odnośnik do skryptu i href do src

od moich testów, Meteor nie jest automatycznie ponownie dodać pliki raz zostały one usunięte, więc musisz znaleźć sposób na ponowne dodanie ich dynamicznie, jeśli chcesz, aby ten sam użytkownik mógł się poruszać między główną witryną a witryną administratora. Lub po prostu, jeśli strona odsyłająca http do strony głównej pochodzi od administratora, wymuś ponowne załadowanie strony, a następnie załadują się zasoby bootstrap i wszystko będzie wyglądać ładnie.

P.s.upewnij się, że href prawidłowy dla jQuery wersji

Źródło

2013-07-16 21:46:06

Jeśli ktoś jest zainteresowany tym żadnych plików js/css, pisałem do niego pomocnika:

if (Meteor.isClient) { 

    // dynamic js/css include helper from public folder 
    Handlebars.registerHelper("INCLUDE_FILES", function(files) { 
    if (files != undefined) { 
     var array = files.split(','); 
     array.forEach(function(entity){ 
     var regex = /(?:\.([^.]+))?$/; 
     var extension = regex.exec(entity)[1]; 
     if(extension == "js"){ 
      $('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>'); 
     } else if (extension == "css"){ 
      $('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />'); 
     }; 
     }); 
    } 
    }); 
    Router.onStop(function(){ 
    $("[data-dynamicJsCss]").remove(); 
    }); 

}

Następnie wystarczy użyć:

{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}

w którymkolwiek z załadowanych szablonów :)

Źródło

2015-06-14 18:33:29

Bez bootstrap z konkretnych tras w Meteor

Odpowiedz

Powiązane problemy