esclusa bootstrap da percorsi specifici Meteor

speravo che qualcuno potesse dare qualche input su questo,esclusa bootstrap da percorsi specifici Meteor

Sto creando un'applicazione di meteoriti in cui vorrei utilizzare bootstrap per creare l'ambiente di amministrazione, ma hanno il visitatore lato rivolto usando css personalizzati. Quando aggiungo il pacchetto di bootstrap per la mia app utilizzando meteora è disponibile in ogni pagina, c'è un modo per limitare il carico di bootstrap alle rotte che sono '/ admin'?

fonte

2013-07-16 Jasper2_0

Quando si aggiunge il pacchetto di bootstrap non è possibile. È possibile, tuttavia, aggiungere csses bootstrap per public directory e quindi caricarli in un subtemplate un'intestazione che verrà resa solo quando sei nel cruscotto.

EDIT

Ma allora come si va sulla creazione di modelli di testa separate?

Facile:

<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); 
     ... 
    } 
});

fonte

2013-07-16 21:44:15

ma allora come si va sulla creazione di modelli di testa separate? Da quanto ho capito, Meteor analizza tutti i file .html nel progetto e quindi concatena tutti i tag che trova in uno che viene pubblicato per l'utente? (Ad esempio, l'inserimento di un collegamento a StyleA.css nel modello A e un collegamento a StyleB.css nel modello B ha come risultato che entrambe le teste si sfasciano insieme e che carica sia StyleA.css che StyleB.css ... –

Mi dispiace, ma per quanto ne so, al momento non è possibile con la meteora.Vedi anche questo problema [qui] (https://github.com/meteor/meteor/issues/266). Ho creato un [esempio di progetto] (https: //github.com/Jasper2-0/meteor-handlebars-head/) mostrando che questo approccio risulterà nel far sì che il tuo tag {{> manubrio}} venga inserito direttamente nel tuo html ... –

NOTA BENE: non sono sicuro di un 'modo di meteoriti' per fare questo, ecco come lo farei con la pianura JS.

jQuery

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

JS - Credito al 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")

Tuttavia, facendo che avrebbe completato rimuoverlo dalla pagina. Non sono sicuro che la meteora proverà a leggerla quando un utente accede a un'altra pagina. Se questo non viene automaticamente letto, allora c'è un problema di bootstrap che non viene incluso quando qualcuno passa dalla sezione di amministrazione al sito principale, il che interromperebbe l'aspetto del sito.

Il modo in cui vorrei andare in giro che potrebbe essere quella di disabilitare e abilitare i fogli di stile:

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

Ci mio essere altre risorse bootstrap che possono avere bisogno di essere rimosso, dare un'occhiata a ciò che la pagina viene caricata.

Per utilizzare jQuery nello stesso modo, ma per i file JavaScript, ricordarsi di cambiare link alla sceneggiatura e href a 'src

Dalle mie prove, Meteor non automaticamente aggiungere nuovamente i file una volta sono stati rimossi quindi è necessario trovare un modo per reinserirli dinamicamente se si desidera che lo stesso utente possa andare avanti e indietro tra il sito principale e il sito di amministrazione. O semplicemente se il referrer http del sito principale proviene dall'amministratore, forza ricaricare la pagina e quindi le risorse bootstrap si caricheranno e tutto sembrerà carino.

P.sessere sicuri di ottenere il href corretto per la versione jQuery

fonte

2013-07-16 21:46:06

Se qualcuno è interessato a inclusi i file js/css, ho scritto un aiutante per esso:

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(); 
    }); 

}

quindi utilizzare semplicemente:

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

in uno dei tuoi modelli caricati :)

fonte

2015-06-14 18:33:29

esclusa bootstrap da percorsi specifici Meteor

risposta

Problemi correlati