javascript - Run a function after DOM is updated from a helper function -
edit:
this precisely want do:
template.frameitems.helpers({ frames: function() { var trialid = session.get('trialid'); return frames.find({trialid: trialid}); // when new frames rendered, want call positionelements() } }); template.frameitems.onrendered(function() { this.autorun(function() { var trialid = session.get("trialid"); positionelements(); // problem: positionelements() called before dom updated `frames` helper function }) });
edit2:
this second attempt doesn't work.
var framedep = new tracker.dependency; template.frameitems.helpers({ frames: function() { var trialid = session.get('trialid'); framedep.changed(); return frames.find({trialid: trialid}); // when new frames rendered, want call positionelements() } }); template.frameitems.onrendered(function() { this.autorun(function() { framedep.depend(); positionelements(); });
the same problem still remains. time positionelements()
invoked, dom still not updated new frames
objects. need way find out when dom updated. onrendered()
not called after first time template rendered, problematic in case.
edit3:
i ended doing this, feel there should better solution.
if (meteor.isclient) { var frameitemstemplate; template.trialworkspace.onrendered(function() { this.autorun(function() { var trialid = session.get("trialid"); if (frameitemstemplate) { blaze.remove(frameitemstemplate); } frameitemstemplate = blaze.render(template.frameitems, $('.frame-items-container')[0]); }); }); template.frameitems.helpers({ frames: function() { var trialid = session.get('trialid'); return frames.find({trialid: trialid}); } }); template.frameitems.onrendered(function() { positionelements(); }); }
and template file
<template name="trialworkspace"> <div class="trial-workspace-container"> <div class="row frame-items-container"> <!-- populated programmatically instead of {{> frameitems}} --> </div> </div> </template> <template name="frameitems"> {{#each frames}} <div id="frame-{{_id}}" class="frame-preview-item cyan lighten-5"> <div class='frame-name'>{{name}}</div> <div class="ep"></div> </div> {{/each}} </template>
your first assumption wrong. onrendered
renders when template inserted dom, if want reactivity, you'll wanna stick autorun
in callback.
if (meteor.isclient) { template.trialworkspace.oncreated({ dep = new tracker.dependency(); }); template.frameitems.helpers({ frames: function() { var trialid = session.get('trialid'); console.log("i getting called"); dep.changed(); return frames.find({trialid: trialid}); } }); template.trialworkspace.onrendered(function() { tracker.autorun(function() { dep.depend(); console.log("onrendered"); }) }) }
Comments
Post a Comment