I want to load a javascript file but do not want a "<script type="text/javascript" src="..."></script>" tag created for it.
I am using iron-router. So, I want this js file to execute in 'onAfterAction' hook, i.e. after the template is loaded.
I am thinking of following ways to do this:
One way is place this file in "public" directory and use '$.getScript' function to load and execute this on demand. But, these files won't get minified and compacted to one file. Also, this will need another fetch on the n/w.
The other way is to create a package and include this file in the package. But, then I will have to enclose the whole file in a function and 'export' this function in package. And execute this function on demand.
The third way is to put these files in 'client' directory and call "$.getScript('/client/js/...". But, the js file would get executed twice as a "<script type="text/javascript" src="..."></script>" tag will be created for it..
Is there a better way of doing this so that the file is locally available and can be executed on demand?
From what I understand about Meteor. All JavaScript executes without having to load a <script></script> tags. Depending on how you seem okay with it being a public script, I'd put it in the client folder and utilize the Template.[your-template-name].rendered in some way where you can load that particular script after the template is rendered.
http://docs.meteor.com/#/basic/Template-onRendered
Related
I'm creating a meteor package, very simple one like this
api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');
I noticed that if I change above code to
api.addFiles(['errors.js', 'errors_list.js', 'errors_list.html'], 'client');
Meteor says: Template is not defined.
It is very hard to find out what caused this error. And why js file cannot go before html file in addFiles?
When you use Spacebars (the default templating engine), templates are defined in HTML files :
<template name="fooTemplate">
...
</template>
You can then access this template from everywhere else, be it HTML or JS:
<!-- HTML file -->
{{> fooTemplate}}
//JS file
Template.fooTemplate
If you try to do such an access before the template has been created, it will fail.
Meteor packages load files sequentially. This is how you control the load order.
If you try to use a template before it has been defined, it's undefined and will throw an exception when you try to access it (something along the lines of fooTemplate is undefined).
Thus, as in everything in programming, always initialize first and use later.
Put your HTML files before the JS, and you're good to go.
I just started using the feature that allows you to compile all TypeScript to a single .js file. The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
Are there any built in utilities that allow me to specify this? If not, what else can I use? I work with a team using source control, so a solution like a NuGet package that can automatically get installed for my colleagues when they use the project is preferable.
The problem I ran into, as you'd expect, is that the entire .js file is executed, and not just the module(s) that I need my page to execute.
You shouldn't have code randomly put at a global level. The global level of your code be just functions and class that are inert by them selves.
Then have the UI call these functions / classes based on current html. Some UI framework (like angular) can help you do this seperation in a neat way (example : https://www.youtube.com/watch?v=Km0DpfX5ZxM&feature=youtu.be)
I want to add a third party Javascript File.
E.g. When I put it in folder /public/test.js or /lib/test.js or /client/test.js
function testLoad(){
alert("something");
}
I see the scripts getting loaded but when I try to run them through
if (Meteor.isClient) {
testLoad();
}
I get the following error
ReferenceError: testLoad is not defined
What am I missing?
You should put your file in client/compatibility:
Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.
http://docs.meteor.com/#structuringyourapp
The problem is that function functionName(){ <code> } wont be a globally defined function (unless you put it in the client/compatibility folder).
I'd like to include JS from a CDN in Meteor before including my own client scripts so that the client scripts can depend on it.
...
<script type="text/javascript" src="https://ajax.googleapis.com/..."></script>
...
<script type="text/javascript" src="/client/..."></script>
...
I tried including the script via *.html file and between <head> tags. But it seems that header content from *.html files will always be appended to the end of the HTML header, no matter where I place it in the file hierarchy (e.g. placing the file in a lib folder or sorting it alphabetically before client JS files won't help).
Any ideas how I could include JS from a CDN before client scripts without having to build a smart package?
Assuming you don't need to load these files before the Meteor packages, create a JS file which is loaded before any of the others. Meteor loads files in alphabetical order so it must be the first file loaded. To that end, naming it aaLoadCDN.js should suffice. Dynamically load the CDN scripts by adding a script src element to the document head:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript'); // optional
script.setAttribute('src', 'url/to/the/cdn/script.js');
document.getElementsByTagName('head')[0].appendChild(script);
Here are some real-world Meteor packages loading scripts from CDNs:
snapsvg
Font-Awesome (CSS).
You can append the script after the template is rendered. So your script will load only after every other line has been loaded. For example if you directly add a jquery plugin to your template html file, you'll get "jquery not found" error. But this approach prevents that:
Template.Main.onRendered(function () {
$('head').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>');
});
There's also an abandoned package called meteor-external-fileloader that gives an example using Stripe.js. It hasn't been maintained since September 2013, so be careful.
I have to move all my scripts into a separate .js file. But I have wired the code in the client (*.aspx) file, with code such as
<script>
var x=<%=ViewData["Key"];%>
</script>
I'm sure there will be an issue when I move that line to the js file as the server side context can't be accessed.
How do I solve this issue?
The most straightforward thing to do is to move all JS code except these variable assignments.
Effectively, the trick is dependency injection in javascript. First, abstract the variables you are generating from server-side variables into parameters for your javascript methods and objects. Then use a small amount of script in-page to setup the javascripts to run.
If you are dealing with a few rather static things (eg--some path names), another tactic is to create a javascript "configuration" object that is in a separate, server-generated script, that can be called by your other scripts as needed.