Nested Meteor (Blaze) templates controlled by parent

Question

I'm trying to avoid repetitive template code for forms that are essential the same when creating or editing new items.

For example, something like this:

<template name="createOrEdit">

   <form role="form">

      <div class="form-group">
         <input type="text" class="form-control" id="title" placeholder="Title"/ value="{{title}}">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>

   </form>

</template>

<template name="create">   
  {{> createOrEdit}}
</template>

<template name="edit">   
  {{> createOrEdit}}
</template>

Then, I could created separate template handlers:

Template.create.events(...
Template.edit.events(...

However, those parent template wrappers won't get the events for the main child template.

Is there a way to do what I want?

Answer 1

Those parent templates can get the events from child template. Use it like this:

Template.create.events({
  'click .btn':function(){

  }
})

Template.edit.events({
  'click .btn':function(){

  }
})

In Template.createOrEdit.events object you keep events used by both templates and in Template.edit.events and Template.create.events specific code for each.

see proof and source code

This approach is really nice as you can customize form by passing some variables:

{{# create btnText="create" }}{{/create}}
{{# edit btnText="update" }}{{/edit}}

And in createOrEdit template you can use variable btnText to change button's label.