Simple Javascript For Loop in Meteor
Question
I'm assuming I putting this in the wrong area or making some other flaw due to my lack of understand as I'm still learning Meteor.
I have a Meteor application working with data, etc. and all is well on that front. I have a number of logos created for this application that I want to share with some others to get feedback on which they prefer.
All the logo files are named logo1.png, logo2.png, logo3.png, etc. It's the perfect time for a quick and easy for loop (because I know how many files I have) that just concatenates the loop variable onto the word logo and then the .png.
So on my local computer I throw up an HTML file with the following that works exactly how I need it to.
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
Then I put into my Meteor main.html file:
<body>
{{> header}}
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
<div class="text-center">
{{> invList}}
</div>
</body>
The problem is my Meteor application is catching that "<" in the "i < 7" statement and expects there to be a tag.
So I get the following error:
While building the application: client/main.html:10: Expected tag name after
<..."> for (i = 1; i < 7; i++) { ...
I'm probably missing something here about where code needs to be placed or something but I've gone through Meteor docs, DiscoverMeteor, and done some Googling in addition to checking this site and I just haven't found how to make Meteor ignore this bit of javascript so it doesn't catch that less than sign and expect anything.
Should I just put this code in /public somehow? If so I'm not sure how I would call it from main.html so it places the images where I want them.
2 answers
solution1
3 ACCPTED 2014-07-03 21:20:57
As you already know, you shouldn't write to HTML like that. Instead, put your loop in a helper.
HTML:
<body>
{{> images}}
</body>
<template name="images">
{{#each logos}}
<img src="{{url}}" class="logo"/>
{{/each}}
</template>
JS:
Template.images.logos = function() {
return _.map(_.range(1, 7), function(idx) {
return {url: 'logo' + idx + '.png'};
});
};
CSS:
.logo {
height: 200px;
}
solution2
0 2014-07-03 16:33:48
I don't think that it's a good idea to embed a script in the html when you are using Meteor. If you still want to do so, remember to escape some symbols. To correct your script, use following instead:
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.