Question

我正在尝试对辅助函数{{htmlMarkup}}的每次评估进行一些DOM操作。问题是当页面加载时，在模板有DOM之前触发了帮助程序。

Template.myTemplate.helpers({
    htmlMarkup:function(){
        var tmpl = Template.instance();
        tmpl.$('.code-container').empty();

        Tracker.afterFlush(function(){
            Prism.highlightElement(tmpl.$('.code-container')[0]);
        });
        return input.get();
    }
});

我会收到错误消息Exception in template helper: Error: Can't use $ on template instance with no DOM。我试图检查tmpl.firstNode是否未定义，但它不起作用。解决这个问题的最佳方法是什么？

Answer 1

我们可以检查模板是否已呈现（因此具有DOM），其属性为var tmpl = Template.instance(); if(tmpl.view.isRendered){ //Do DOM manipulation }，如下所示：

{{1}}

Answer 2

尝试在模板实例渲染时设置属性，并检查帮助程序中是否为真。

Template.myTemplate.onCreated(function(){
  this.isRendered = false;
});

Template.myTemplate.onRendered(function(){
  this.isRendered = true;
});

Template.myTemplate.helpers({
  htmlMarkup:function(){
    var tmpl = Template.instance();
    if(!tmpl.isRendered){
      return input.get();
    }
    tmpl.$('.code-container').empty();
    //
    Tracker.afterFlush(function(){
      Prism.highlightElement(tmpl.$('.code-container')[0]);
    });
    //
    return input.get();
  }
});

根据您尝试做的事情，您还可以在Tracker.autorun处理程序中使用Template.onRendered，以便在检测到每个输入后执行任意代码。

Template.myTemplate.onCreated(function(){
  this.input = new ReactiveVar("");
});

Template.myTemplate.onRendered(function(){
  this.autorun(function(){
    var input = this.input.get();
    //
    this.$(".code-container").empty();
    //
    Tracker.afterFlush(function(){
      Prism.highlightElement(this.$(".code-container")[0]);
    });
  });
});

Template.myTemplate.events({
  "input textarea": function(event, template){
     template.input.set(template.$("textarea").val());
   }
});

MeteorJS检查模板实例是否有DOM

2 个答案: