Meteor js - how to connect to the "rendered" event of a recursive template?

Question

Meteor js - how to connect to the "rendered" event of a recursive template?

I have a situation where I partially recycle Handlebars based on the Mongodb tree structure, something like this:

<template name='menu'>
    <ul class='menu'>
     {{#each topLevelChildren}}
        {{>menu-item}}
     {{/each}}
    </ul>
</template>

<template name='menu-item'>
  <li>{{name}}
    {{#if listChildren.count}}
    <ul>
        {{#each listChildren}}
           {{>menu-item}}
        {{/each}}
    </ul>
    {{/if}}
  </li>
</template>

where the mongodb docs look like this:

{ _id : ObjectId("525eb7245359090f41b65106"),
  name : 'Foo',
  children : [  ObjectId("525eb60c5359090f41b65104"),   ObjectId("525eb6ca5359090f41b65105") ]
}

and listChildren simply returns a cursor containing complete documents for each item in the parent's child array.

I want to do a bit of jquery makeup on a rendered tree, but I can't seem to hook into the "rendered" event for the whole tree, something like

Template.menu-completed.rendered = function(){
   // console.log('done!');
}

Attempt this

Template.menu.rendered = function(){
    console.log($('menu li'));
}

This not only returns the correct results (the brackets are filled with commas), but also freezes the web inspector (but not the application ...). Any help would be greatly appreciated!

+4

meteor handlebars.js

Petrov Jan 23 '14 at 17:25

2

Andrew Mao · Answer 1 · 2014-01-30T16:55:45+0000

:)

Meteor (0.7.x) rendered , , . ( , Meteor 0.8 - shark " " - .)

- , , , . , , , , - menu-parent - . , rendered ( , ), , .

, , . , jQuery DOM, , Meteor jQuery. , , ?

...

Christian Fritz · Answer 2 · 2014-02-02T01:19:06+0000

, , jQuery. , , . :

.
.html : <li><span class="name">{{name}}</span>
.
Template.menu.topLevelChildren = function() { return List.find(); };

:

Template.menu.rendered = function(e){
    $('.name').each(function(i, e) {
        console.log(e);
    });
}

, , , List, :

<span class="name">second</span>
<span class="name">second2</span>
<span class="name">second21</span>
<span class="name">second22</span>
<span class="name">third</span>
<span class="name">third2</span>
<span class="name">third21</span>
<span class="name">third22</span>
<span class="name">third</span>
<span class="name">third2</span>
<span class="name">third21</span>
<span class="name">third22</span>

( second2 second, second2x second2 ..). , , , jquery, , , , . , , - .

.

test.html:

<head>
  <title>test</title>
</head>

<body>
  {{> menu }}
</body>

<template name='menu'>
    <ul class='menu'>
     {{#each topLevelChildren}}
        {{>menu-item}}
     {{/each}}
    </ul>
</template>

<template name='menu-item'>
  <li><span class="name">{{name}}</span>
    <ul>
    {{#each children}}
    {{>menu-item}}
    {{/each}}
    </ul>
  </li>
</template>

test.js:

List = new Meteor.Collection("List");

if (Meteor.isClient) {
    Template.menu.topLevelChildren = function() {
        return List.find();
    };

    Template.menu.rendered = function(e){
        $('.name').each(function(i, e) {
            console.log(e);
        });
    }
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteor js - how to connect to the "rendered" event of a recursive template?

More articles: