Geek asks and answers

Mastering the order of loading external scripts in Meteor (Google Maps)

I tried unsuccessfully to add a google map (external script loading) to the meteor application, and I noticed that there were two problems:

  • If I do a simple thing and add the main script API to mine <head></head>, then it will be displayed last .
  • When this happens, I must insert any scripts that depend on the API again in my template <head>- after the main API script. (otherwise the scripts complain that they do not see the blabla API ..)
  • Then the time comes for calling the function actually - and now we put it inside <head>after the others will not work. You need to use Template.MyTemplate.rendered.

Basically my question is:

  • What is the cleanest way to handle such things?
  • Is there any other variable / method that I can use to make sure my main Google API file is called the very first in my HTML?
+5
source share
3 answers

I just released a package on the atmosphere ( https://atmosphere.meteor.com ), which may help a little. It was called session-extras, and it defines a couple of functions that I used to integrate with external scripts. Code here: https://github.com/belisarius222/meteor-session-extras

- script, , script , . session-extras, . , 3 4 ( ), ...

, , , . , facebook, , , , "" css " facebook..." , .

03/14/2013

, : . Meteorite (), . :

js , , . , , , script , , jQuery, package.js , jQuery, .

( ), , mixpanel filepicker.io, : 1) JS, 2) script, CDN . js ( !) , script, , . Mixpanel , , JS , API , , script; , script , API, . . meteor-mixpanel .

js CDN ; : 1) , , API 2) , . JS , , CDN, .

+7

, Javascript, HTML . Meteor :

:

Meteor JavaScript , . . JavaScript - .

, , , gmaps.js , gmaps .

Meteor Docs:

, , Meteor.startup, Smart Packages, . . JavaScript CSS :

lib .[ ]

- , js client/lib, Javascript.

+2

meteor-external-file-loader , javascript ( ) .

, → mrt add external-file-loader

, , :

var loadFiles = function(files, callback) {
  if (!callback) callback = function() {};

  (function step(files, timeout, callback) {
    if (!files.length) return callback();

    var loader;
    var file = files.shift();
    var extension = file.split(".").pop();
    if (extension === "js")
      loader = Meteor.Loader.loadJs(file, function() {}, timeout);
    else if (extension === "css") {
      Meteor.Loader.loadCss(file);
      loader = $.Deferred().resolve();
    }
    else {
      return step(files, timeout, callback);
    }

    loader.done(function() {
      console.log("Loaded: " + file);
      step(files, timeout, callback);
    }).fail(function() {
      console.error("Failed to load: " + file);
      step(files, timeout, callback);
    });
  })(files, 5000, callback);
}

, , :

Template.yourpage.created = function() {
  var files = [
    "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
    "javascripts/bootstrap.min.js"
  ];

  loadFiles(files, function() {
    console.log("Scripts loaded!");
  });
}

. .created /lib Meteor.startup();

Meteor.startup(function() {
  if (Meteor.isClient) {
    // Load files here.
  }
});

: javascript = . , javascript- . , , - (, , ).

+1

More articles:


All Articles