Create a public method for a template

1

Hi,

How can I create a template public method?

For example:

<template name="coolModal">
  <div id="{{id}}" class="rz-modal">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>{{title}}</h2>
      <p>
        {{> UI.contentBlock}}
      </p>
    </div>
  </div>
</template>

And on the js file of this template, I want to have some method that performs some action on this template. Something like:

on the page where I want the modal to show:

{#coolModal id="board-create" title="Create Board"}}
    <div>Some random text</div>
{{/coolModal}}

Calling:

Template.coolModal.show();

What I have right now is something like this:

Template.coolModal.show = function(el){
  $(el).animate({
    opacity:1
  }, 500);
};

But it does not seam to work.

Can anybody explain me what I’m doing wrong? thanks

2

Narven, I’d recommend you to do the official tutorial for Meteor, there’s a nice explanation on how to make such things. Imho that should be the first step to do before starting to write any Meteor code by yourself.

https://www.meteor.com/tutorials/blaze/creating-an-app

In particular, you’ll get to know from there about helpers and events. Helper is a method that lets you get a state from your JS file. Here’s an example of a helper that returns a simple string:

Template.coolModal.helpers({
  example: "This is a string but it can be everything else, f.e. a reactive variable or a document from the database"
});

Event is called when you perform some action on template, f.e. you click a button to initialize a modal.

Template.coolModal.events({
  "click button.class": function (event) {
    console.log("Somebody clicked a button with class "class", what should I do?")
  }
});

Also, if you will want to make it global, available in all templates, use a global helper.

3

Thanks, but I already know all of that.

I didnt know that you could from one template call a method on another template using the helpers like that.

4

And the stuff that ur say, does not work.

To my knowledge helpers and events work inside the template they are attached. not outside.

5

Sorry. I tried to understand what you meant in your message by rereading it carefully some 3-4 times, but it seems like I failed. The line that was the least understandable for me was in particular:

And on the js file of this template, I want to have some method that performs some action on this template.

Because any way I tried to read it, it sounded like you want a helper that works inside, not outside of the template context. Well, I’ll put the blame on my poor English.

Anyways, what I suggest you is a global helper, as it will work in every template. You declare it with:

Template.registerHelper('helperName', function () {
  // do something here
});

And then you can simply call it from any template.

6

Sorry, my english also suc…s

7

how about @narven create a template that receives an argument then use it on every template that you want…

{{>coolmodal }}

<template name="coolmodal>
{{helper}}

Template.coolmodal.helpers({
helper : function (argument) {
return “this what will return from the {{helper}} and will replace {{>coolmodal}}” + argument + “<-this is argument”
}
});

so if you do

{{>coolmodal "this is it!!"}}

the results will be returning the strings like below…

this what will return from the {{helper}} and will replace {{>coolmodal}} this is it!<-this is argument

I am sorry for my english too… i just want to share and hope i can help you… have a nice day :smile:

8

There are always packages like Blaze Components or Template-Extensions that make sharing events between templates a much easier thing.

1 Like
9

@brajt that Blaze Components looks nice, going to take a look at it.

thanks