将类添加到由大气层包创建的模板内的DOM元素中？

Question

I am currently utilizing Meteor, the materializecss atmosphere package, and the user-accounts:materialize atmosphere package. I am attempting to use materialize class-based styling to change the style of the user-accounts:materialize sign-in page, which is created by the {{>atForm}} template.

Template.atForm.onRendered( function(){
  var element = $(".at-form, .at-btn");
  element.addClass("grey lighten-2 grey-text text-darken-4");
});

This works great when the page is initially rendered. However, if I sign-in, then sign-out, the sign-in template is again presented but this time the onRendered() function isn't called and my styling is lost. How do I avoid that?

And is there a better way to influence elements inside a 3rd party template than calling onRendered()?

Answer 1

I would recommend using https://github.com/aldeed/meteor-template-extension to override the package template with your own. Much easier approach, I think.

@Kyll - I assummed that the README was enough of an example; here is how you could use it:

add the package to the meteor project with:

meteor add aldeed:template-extension

Add your new template

<template name="myTemplate">...</template>

In the startup code on the client side, override the template:

Template.myTemplate.replaces("originalTemplateName");

Answer 2

The problem is that at-form has sub templates that change. You need to handle onRendered for each of them to make sure your class is applied to them all.