Template.foo.rendered deprecated whats correct?

help
1

I understand with Meteor 1.0.4.2 that Template.foo.rendered is deprecated. And now we have onRendered, onCreated, and onDestroyed methods to Template.

I’m wondering if this is correct

Template.myTemplate.onRendered = function () {
};

Or should it be like so

Template.myTemplate.onRendered(function () {
});
2 
Template.myTemplate.onRendered(function () {
});

The idea is that you can specify multiple functions to be executed when the template is rendered. It works the same as helpers and events.

1 Like
3

@manuel how would you set multiple functions?

and is this legit now?

Template.myTemplate.onRendered(function () {
  $('#form').parsley({trigger: 'change'});
  window.ParsleyValidator.setLocale(getLocale());
});
4 
Template.myTemplate.onRendered(function () {
  $('#form').parsley({trigger: 'change'});
});

Template.myTemplate.onRendered(function () {
  window.ParsleyValidator.setLocale(getLocale());
});

It doesn’t make much sense in this case but it’s a godsend for packages. In my case one of my packages is now able to add code onCreated, onRendered, and then do some cleanup onDestroyed. This without affecting the consumer of the package (because they can add their own onRendered and the others).

5

@manuel wait I can break it apart if I like but I can also have all jQuery in one function?

IE this is ok?

Template.test.onRendered(function () {

  // Sets parsley form validation and local
  $('#add-block-form').parsley({trigger: 'change'});
  window.ParsleyValidator.setLocale(getLocale());

  // Sets date picker
  $('#datepicker').datetimepicker({useCurrent: false, defaultDate:"", locale:  getLocale()});


  // Sets certification select 2
  $("#certificationStatus").select2({
    placeholder: mf('pleaseSelectCertificationStatus', 'please select certification status'),
    allowClear: true
  });

  // Hides fields that are not required on render
  hideTransitionInput();

  // If field status transition shows required fields
  $("#fieldStatus").change(function(){
    if($('#fieldStatus').val() === 'transition') {
      showTransitionInput();
    } else {
      hideTransitionInput();
    }
  });

});

6

Sure, it’s all part of the plain JS function. That’s why I said in this case it doesn’t make much sense, because you can just put the two statements in the same function.

1 Like
7

@manuel thanks much clearer now. Yes I agree I don’t like and feels like repetitive code when creating two on render methods just to call two different functions.

8

Yep, 99% of the time you will only have one callback, but it is useful for package authors.

9

btw @sashko, thank you for your recommendation of using Template.name.viewmodel(... instead of putting stuff in Template.name.onCreated. I love it.

1 Like
10

First I cannot say enough amazing things about Meteor and I’m constantly evangelizing it to anyone I can. It’s an amazing framework!

I would like to request a very simple, yet what would be an incredibly helpful thing. In the official documentation give example code snippets for every topic. This has been a point of struggle for at least me as I dig deeper and deeper into the framework. This is my case in point right here. I’m building up a new view in my app and I wanted to leverage the new this.subscription functionality at the Template level along with the new onCreate, onRender, onDestroy, etc. functions. I have been spinning my wheels for more time then I’d like to admit trying to figure this out. I finally found this post. Thank you @almog for asking this very question.

Adding to the documentation @manuel’s code snippet he provide @almog would I’m sure not just help the two of us out but others as well.

Template.myTemplate.onRendered(function () {
});

All I needed to see was this and it all clicked instantly. Please consider including examples for every topic on the documentation.

Thank you, and keep up the fantastic work!!

6 Likes
11

That’s a great idea! We should definitely have more examples, and more complete coverage of APIs with examples.

1 Like
13

How can I do this today with the new version?

I get Template is not defined. I’m using angular-meteor

14
15

Please start a new thread for the new question.