Question

我有一个流星模板。这个模板服务器作为＆＃34;代码widged＆＃34;

// 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。

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

我＆＃39;感觉我必须用＆＃34; onRendered＆＃34; 但是当我只更改模板变量时，似乎onRendered没有调用... 也许我可以用afterflush？说实话，我有点困惑......

模板：

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

})

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

        }
    }
})

Meteor，模板更改后调用js

1 个答案: