So laden Sie Stylesheets und Skripts in einer Meteor App ordnungsgemäß.

Ich baue ein Dashboard mit Meteor, ich habe eine Designvorlage (HTML) von http://themeforest.net/ gekauft und kann nicht herausfinden, wie ich diese Designvorlage richtig in meine Meteor App integrieren kann.So laden Sie Stylesheets und Skripts in einer Meteor App ordnungsgemäß.

Das Problem ist ziemlich einfach, ich habe Probleme beim Versuch, die Liste der CSS-Dateien und JS-Dateien zu laden, die für die ordnungsgemäße Funktion der Design-Vorlage erforderlich sind. Ich denke, die Dateien werden nicht in der richtigen Reihenfolge geladen, was zu Fehlern führt. Zum Beispiel funktioniert die Hälfte der jquery-Plugins nicht, dies könnte verursacht werden, wenn die Plugin-Datei vor der jquery-Datei selbst geladen wird. Ich kann im Netzwerk sehen, dass die Dateien geladen werden, aber zum Beispiel ist die Funktion $ .sortable nicht verfügbar.

Was ist die richtige Methode zum Laden von Stylesheets und Javascript-Dateien, um sicherzustellen, dass sie in der richtigen Reihenfolge geladen werden?

Das erste Problem war ich wusste nicht, wo genau diese Dateien zu setzen. Diese Dateien sind für die Logik meiner Anwendung nicht erforderlich, daher wollte ich sie nicht in den Verzeichnis-Client einfügen. Plus, wenn ich sie im Client Meteor automatisch lädt sie, und ich habe keine Kontrolle über die Reihenfolge, die sie geladen sind.

Also legte ich alle Template Design Abhängigkeitsdateien in den Ordner öffentlich und versuchen, die Dateien manuell zu laden .

Ich habe versucht, die folgenden, um die Dateien zu laden:

1. Importieren Sie alle Dateien in dem Client/main.html Datei:

<head> 
    <meta charset="UTF-8"> 
    <title>ETL Web-Admin</title> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> 
    <meta content="" name="description"/> 
    <meta content="" name="author"/> 


    <!-- ================== BEGIN BASE CSS STYLE ================== --> 
    <link href="/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/> 
    ... 
    <!-- ================== END BASE CSS STYLE ================== --> 


    <!-- ================== BEGIN BASE JS ================== --> 
    <script src="/plugins/jquery/jquery-1.9.1.min.js"></script> 
    ... 
    <script src="/plugins/jquery-cookie/jquery.cookie.js"></script> 
    <!-- ================== END BASE JS ================== --> 

</head>

2. Importieren Sie alle Dateien in die Client/main.js Datei:

Meteor.startup(function() { 
}); 



// <!-- ================== BEGIN BASE CSS STYLE ================== --> 
    import "../public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" 
    ... 
// <!-- ================== END BASE CSS STYLE ================== --> 

// <!-- ================== BEGIN BASE JS ================== --> 
    import "../public/plugins/jquery/jquery-1.9.1.min.js" 
    ... 
//  <!-- ================== END BASE JS ================== -->

beiden Methoden auf der Oberseite gibt das gleiche Problem, Die Abhängigkeiten werden nicht korrekt geladen.

schließlich die Design-Vorlage zu initialisieren, wenn alle Elemente und die (in jquery Begriffe) geladen Dokument ist bereit, ich habe zwei Funktionen aufzurufen:

App.init() 
// and 
Dashboard.init()

Im traditionellen HTML-Format kann es geschehen wie folgt:

<script> 
     // when document is ready, do something 
     $(document).ready(function() { 
      App.init(); 
      Dashboard.init(); 
     }); 
</script>

Wie mache ich das in Meteor?

Quelle

2016-06-21 Codious-JR

Verwenden Sie die sctructure für Projekte Meteor, Sie Dateien in CSS in Client> Sheets und Sie in Client JQuery> youNameTemplate.js

Template.youNameTemplate.rendered = function() { 
    App.init(); 
    Dashboard.init(); 
}

Quelle

2016-06-21 21:16:22

Wenn u Vergangenheit die Entwicklung Ihrer App erhalten und setzen sie leben es ist empfohlen, alle Asset-Dateien (CSS und Bilder) auf einem CDN zu hosten – SlartyBartfast

So laden Sie Stylesheets und Skripts in einer Meteor App ordnungsgemäß.

Antwort

Verwandte Themen