How do i get an onload function on the body for a specific template using meteor.js?

StackOverflow https://stackoverflow.com/questions/22649242

  •  21-06-2023
  •  | 
  •  

Pregunta

I'm trying to get the following behavior for a certain template:

<body onload="someInitFunction();">

Let's say i have the following markup (i'm using mrt router, not iron-router, for {{renderPage}}): 

// Main Template
<head>
  <title>meteorite-knowviz</title>
</head>

<body>
  {{> header}}

  <div class="container-fluid">
    <div class="row">
      {{renderPage}}
    </div>
  </div>

  {{> footer}}
</body>

That renderPage is the secondTemplate:

<template name="secondTemplate">
  {{#if currentUser}}
    <div class="col-md-2">
      <div class="list-group">
        <a class="list-group-item" href="{{render thirdTemplate please...}}">Third Template</a>
        <a class="list-group-item" href="{{render fourthTemplate please...}}">Fourth Template</a>
      </div>
    </div>

    // In this case let's say thirdTemplate gets rendered
    {{render the choice taken above please...}}

  {{/if}}
</template>

And within this template, depending on which link was clicked on, (in this case the third) there will finally be a thirdTemplate, which will show a data visualization with some help by a javascript framework, which will be in need of a <body onload="initFunction();">in order to display the data:

<template name="thirdTemplate">
  <div class="col-md-5">
    <h2>THIS!! section needs a "<body onload="initFunction();"> in order to work" ></h2>
  </div>

  <div class="col-sm-5">
    <h2>Some other related content here</h2>
  </div>  
</template>

To sum up i have three questions:

1a. How could i get the third template to get a <body onload="initFunction();">

2a. In which way can i render different templates within the secondTemplate?

2b. Can i use a {{renderPage}} within this template even though this template is the renderedPage in the main template or should i do it in some other way?

¿Fue útil?

Solución

In order to get the <body onload="initFunction();"> i had to do the following:

First add the following function to a .js file in the client folder:

Template.thirdTemplate.rendered = function() { // Template.thirdTemplate.created - also worked.
  $('body').attr({
    onload: 'init();'
  });
}

This however got me an error saying that initFunction is not defined. In an standard html page my could work just fine, but in meteor i had to change my function from:

function initFunction(){
  //what ever i wished to do 
}

To:

init = function() {
  //what ever i wished to do
}

Regarding the rendering of pages, iron-routing is the way to go since the router add on is not under development any more.

Otros consejos

1a. How could i get the third template to get a <body onload="initFunction();">

You probably want to call initFunction when the third template has been rendered, so just put your call to it in the rendered callback.

Template['thirsTemplate'].rendered = function(){
    initFunction()
}

2a. In which way can i render different templates within the secondTemplate?

2b. Can i use a {{renderPage}} within this template even though this template is the renderedPage in the main template or should i do it in some other way?

Listen for clicks on the links, and when one happen you manually render the desired template (possible with Meteor.render, if you need reactivity) and add it to the right node in the document. See this question.

It may be possibly to achieve with router (I don't know that package).

I think that what you want to use is the created callback, that will be called each time your template is created, and not the rendered callback, that would be called each time a change has caused the template to re-render.

Template.thirdTemplate.created = function(){
    initFunction()
}

See the documentation for templates for other types of callbacks: http://docs.meteor.com/#templates_api

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top