Templates in a Template?

help
1

I had an HTML file with contents like this:

<div class="container">
{{> tblTravelerInfo}}
{{> tblTopMiddle}}
{{> tblTopRight}}
{{> tblExpenseDescription}}
{{> advisoryNotices}}
{{> tblFundOrgAccountActivityAmount}}
</div>
</body>

…but then realized I wanted to wrap the whole shebang in a “form”, with a Submit button, so changed it to this:

<div class="container">
<form>
{{> tblTravelerInfo}}
{{> tblTopMiddle}}
{{> tblTopRight}}
{{> tblExpenseDescription}}
{{> advisoryNotices}}
{{> tblFundOrgAccountActivityAmount}}
<input type="submit" value="Submit">
</form>
</div>
</body>

…but then realized that in this case the Submit button is not inside a Template, so I can’t use Template.Bla.events() to respond to the Submission of the form.

So is something like this what I should do:

<div class="container">
   {{> templatizer}}
</div>
</body>

<template name="templatizer">
	<form>
	{{> tblTravelerInfo}}
	{{> tblTopMiddle}}
	{{> tblTopRight}}
	{{> tblExpenseDescription}}
	{{> advisoryNotices}}
	{{> tblFundOrgAccountActivityAmount}}
	<input type="submit" value="Submit">
	</form>
</template>

…and then Template.templatizer.events() ?

…or…???

2

It* seems to work just fine; I still wonder if it is kludgy or not, though - IOW, is this methodology (no pun intended) Meteorific or malevolent?

Template.templatizer.events({
    "submit form": function (event) {
       console.log('submit button was clicked');
    }
  });
3

All looks fine!

You can also use Dynamic Templates which might lead to something cleaner.

4

Hi, you can also use : Template.body.events

1 Like
5

I second nxcong, Template.body.events is built into meteor. And also consider using this package:

You end up writing code like this, IMO nicer than jquery imperative selectors:

// template
<input type="submit" value="Submit" onclick="{{submitGargantuanForm}}">

// js
Template.body.events({
  submitGargantuanForm: function (event, templateInstance) {
    console.log('submit button was clicked');
  }
});

If you’re using Session to store everything then that’s great. Otherwise, you’re going to have a bit of an issue with getting all that nested template info back into the parent for the submission I’d imagine…

1 Like
6

Beautiful, thanks.
After 20+ years of coding, from Pascal to Delphi to C# to the “web trilogy” of HTML, CSS, and JavaScript/jQuery, Meteor has gotten my excited about programming again – or more specifically, making things (with software). - Clay Shannon

2 Likes