Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force handlebars template to render on demand with meteor

How can i force a meteor template (handlebars template) to re-render through javascript. For example,

I have a template (template1.html)

<template name="template1">
</template>

I want to force render this template from anywhere in my /client directory. Is there anything in the handlebars package that can do this ?

EDIT: Adding more details

I am not having any difficulties creating this template the first time, either through handlebars or javascript. I want to refresh the template and cause my rendered callback to run again. I have code that will fetch and show related data when that template is rendered.

<template name="template1">
     {{each items}}
      {{> template2}}
     {{/each}}
 <template/>

if any data in items changes then i understand, template1 and template2 will both render but what happens when there is any data that changes in template2, i would like to refresh/render template1 again?

like image 244
Warz Avatar asked May 19 '13 19:05

Warz


2 Answers

FOR NEW VERSIONS OF METEOR USE UI.render() and UI.insert()




defunc - for versions of meteor that don't use blaze

Can you provide some more context?

Inside a html file to render that template simply use:

<div id="somediv">
    {{> template1}}
</div>

If you want to do this through javascript one way would be:

$('#somediv').html(Meteor.render(Template.template1));

Take a look at:

  • http://docs.meteor.com/#meteor_render
  • http://handlebarsjs.com/
  • https://github.com/meteor/meteor/blob/master/examples/todos/client/todos.html
like image 118
1321941 Avatar answered Sep 19 '22 11:09

1321941


What is changing in template2 that you would see in template 1? The below would refresh template1 upon an insert or delete.

<template name="template1">
  {{itemsCount}} items
  {{#each items}}
  {{> template2}}
  {{/each}}
<template/>

Or,

    <template name="template1">
      Last updated: {{lastUpdate}}
      {{#each items}}
      {{> template2}}
      {{/each}}
    <template/>

    Template.template1.lastUpdate = function () {
      return Session.get('lastUpdate');
    };

Then somewhere you update your data add:

    Session.set('lastUpdate', new Date() );
like image 33
Jim Mack Avatar answered Sep 22 '22 11:09

Jim Mack