Meteor，模板改变后调用js答案

【问题标题】：Meteor, call js after template has changedMeteor，模板改变后调用js
【发布时间】：2016-11-21 10:38:48
【问题描述】：

我有一个流星模板。这个模板服务器作为“代码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.

所以它应该对模板变量是反应式的。而且我需要渲染的 DOM 来用 ace 替换 div。

我将如何在流星模板中执行此操作？我尝试了几种方法，atm 我使用了一种解决方法一个按钮点击事件和 setTimeout....

我有一种感觉，我必须使用“onRendered”来执行此操作但是当我只是更改模板变量时，似乎没有调用 onRendered ...... 也许我可以去洗后？老实说，我有点困惑......

模板：

<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.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)
        }
    }

})

【问题讨论】：

标签： templates meteor var

【解决方案1】：

我明白了。要在视图更改时运行 javascript 代码，我会写：

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
        })

        }
    }
})

【讨论】：