How should i load external files(i.e. js,css,html) in meteor project?

Question

I am trying to learn meteor and i would like to add js,css and html pages from outside. I have tried to use this package but its not working it seems. I tried to add the html file which is stored in different location with following code

Template.hello.helpers({
    var row='';
    page(){
        jQuery.ajax({
            url:'Desktop/test.html',
            success:function(html){
                row=html;
            }
        });
        return row;
    }
});

It gives unexpected token error.If i remove var row,success and return statement,my app runs with out adding the external page. I have also tried to add JS File with $.getScript(); but it seems its not working for me.If any one can help me,It would be very helpful.

Answer 1

I'm not sure what your intending to do with this external html, but your helper is not properly formatted. Your row variable is throwing an error because it is not inside of your function. You can not declare a variable directly inside of an object. Also, your AJAX call is asynchronous, so row will still be defined as '' when it is returned.

I think you need to look into how templating html works in meteor. You should be placing your row html into its own template, and then including it into the hello template using Spacebars like this:

Hello file:

<template name='hello'>
  <h1>Hello and welcome!</h1>
  {{> row }}
</template>

Row file:

<template name='row'>
  <div class='row'>This is a row.</div>
</template>

Answer 2

OK,I'll try to answer the actual question you asked: How to include an external html file in a template?

Two alternatives:

1. If "external" file is inside your Meteor project, make it a template too: Wrap it with <template name="xxx"> ... </template> and then insert it simply by going {{> xxx}} .

2. If the file is somewhere else, and really needs to be included via a http call, you put a placeholder element <div id="fileGoesHere"></div> where you want it to go, and then in your helper you do:

(See http://docs.meteor.com/api/http.html )

function insertExternalFile() {
    HTTP.get( 'http://someurl', ( error, result ) => {
        if( error ) {
           console.log( error );
           return;
        }
        $('#fileGoesHere').html( result );
    });
}