Meteor, call js after template has changed

Question

I have a meteor template. This templates servers as a "code widged"

// Mockup code:
If Enabled.get() == false:
    // a code spoiler buttons should be loaded.

If Enabled.get() == true:
    // an ace editor instance should be loaded.
    // so i have to wait until the div is rendered 
    // that i can set the div as the ace target.

So it should be reactive on a template variable. AND i need the rendered DOM for replaceing the div with ace.

How would i do this in meteor templates? I've tried several ways, atm i've used a workaround with a button click event and setTimeout....

I' have a feeling that i have to do this with "onRendered" But it seems that onRendered gets not called when i just change a template variable... Maybe i could go with afterflush? I'm a little confused to be honest...

Template:

<template name="msgMultiline">
        <button class="ui black inverted button" data-command="enable">CODE SPOILER</button>  
        {{#if Enabled}}
          <br>
          <div data-control="acetarget" id="{{_id}}" style="width:300px; height:100px">{{msg}}</div>
        {{/if}}
    </template>

Template Helpers/Events:

Template.msgMultiline.helpers({
    Enabled() {return Template.instance().Enabled.get()}
})

Template.msgMultiline.onCreated(function () {
    this.Enabled = new ReactiveVar(false);
});

Template.msgMultiline.events({
    'click [data-command="enable"]' (event,instance) {
        instance.Enabled.set(!(instance.Enabled.get()));
        console.log("events: " + self.Enabled.get())
        if (self.Enabled.get() == true){
            console.log("Should Create ACE "+ this._id)
        }
    }

})

enthus1ast enthus1ast · Accepted Answer · 2016-07-18T18:14:11

I've got it. To run javascript code when the view has changed i'd to write:

Template.msgMultiline.events({
    'click [data-command="enable"]' (event,instance) {
        instance.Enabled.set(!(instance.Enabled.get()));
        if (instance.Enabled.get() == true){
            var MYID = instance.data._id; //debug

        Tracker.afterFlush(function () {
            AceEditor.instance(MYID) // test
            ace.edit(MYID)  // test
        })

        }
    }
})

Meteor, call js after template has changed

1 Answers