Hi,
I have the following templates when implementing file tree for my app. How ever, the templates seem to be getting inserted twice and a flicker of previous tree is wiped out with no data and no tree found the second time. Can anyone throw light on this? if i do not use runOnce in helpers, the method runs twice. Any help is appreciated.
Meteor.startup(function(){
runOnce = 0;
});
Template.fileTreeTemplate.helpers({
treeItems: function() {
if(runOnce == 0) {
console.log(" firstItems");
if(myFolders == null) console.log("Folders is null");
var items = myFolders.find({parent : 0});
console.log(" firstItems length=" + items.count());
runOnce = 1;
return items;
}
}
});
Template.levelATemplate.helpers({
hasChildren: function() {
console.log("there are A children " + myFolders.find({parent: this._id}).count());
return myFolders.find({parent: this._id}).count() > 0;
},
children: function() {
console.log("found A children "+ myFolders.find({parent: this._id}).count());
return myFolders.find({parent: this._id});
}
});
Template.levelBTemplate.helpers({
hasChildren: function() {
console.log("there are B children " + myFolders.find({parent: this._id}).count());
return myFolders.find({parent: this._id}).count() > 0;
},
children: function() {
console.log("found B children "+ myFolders.find({parent: this._id}).count());
return myFolders.find({parent: this._id});
}
});
<template name="fileTreeTemplate">
<div id="tree" style="height: 200px">
FileTree
{{#each treeItems}}
<li id="{{id}}" title="{{name}}">
{{name}}
{{> levelATemplate}}
</li>
{{/each }}
</div>
</template>
<template name="levelATemplate">
{{#if hasChildren}}
<ul>
{{#each children}}
<li id="{{id}}" title="{{name}}">
{{name}}
{{> levelBTemplate}}
</li>
{{/each}}
</ul>
{{else}}
{{{nothing}}}
{{/if}}
</template>
<template name="levelBTemplate" >
{{#if hasChildren}}
<ul>
{{#each children}}
<li id="{{id}}" title="{{name}}">
{{name}}
{{> levelATemplate}}
</li>
{{/each}}
</ul>
{{else}}
{{{nothing}}}
{{/if}}
</template>
<template name="files">
<div id="filesPane">
<div id="userMsg">FilesMessageBar</div>
<div>
<div id="leftTab">
{{> fileTreeTemplate}}
</div>
<div id="centerTab"></div>
<div id="rightTab"></div>
</div>
</div>
</template>