如何在 JavaScript 帮助器中只声明一次变量？答案

【问题标题】：How to declare a variable only one time in JavaScript helpers?如何在 JavaScript 帮助器中只声明一次变量？
【发布时间】：2018-01-19 14:38:31
【问题描述】：

我正在使用流星火焰开发 Web 组件。

在模板助手中，

Template.Button.helpers({
btnName: function() {
    var FirstBtn = new ButtonComponents('Name', this.class, '50px', '30px', '#DDDDDD');
    return FirstBtn.buttonName();
},
btnClass: function() {
    var FirstBtn = new ButtonComponents('Name', this.class, '50px', '30px', '#DDDDDD');
    return FirstBtn.buttonClass();
},
btnStyle: function() {
    var FirstBtn = new ButtonComponents('Name', this.class, '50px', '30px', '#DDDDDD');
    return FirstBtn.buttonStyle();
}});

我只想在助手中声明一次FirstBtn。

因为this.class，我不想在助手之外声明FirstBtn。

我该怎么做？

【问题讨论】：

为什么this.class 阻止你在外部范围内声明FirstBtn？
可能与自引用对象stackoverflow.com/questions/4616202/…有关
因为我使用包含标签（部分）和数据上下文。 {{> Button class="btn black"}}

标签： javascript variables meteor helper meteor-blaze

【解决方案1】：

您应该将变量放在模板实例中，并使用 Template.instance() 访问它。

Template.Button.onCreated(function(){
    this.FirstBtn = new ButtonComponents('Name', this.data.class, '50px', '30px', '#DDDDDD');
});

Template.Button.helpers({
btnName: function() {
    const instance = Template.instance();

    return instance.FirstBtn.buttonName();
},
btnClass: function() {
    const instance = Template.instance();

    return instance.FirstBtn.buttonClass();
},
btnStyle: function() {
    const instance = Template.instance();

    return instance.FirstBtn.buttonStyle();
}});

在助手的第一行写 const instance = Template.instance(); 是 BlazeJS 文档推荐的一个好习惯。

【讨论】：

【解决方案2】：

var FirstBtn;
function getFirstBtn(cls) {
    if (FirstBtn == null) {
        FirstBtn = new ButtonComponents('Name', cls, '50px', '30px', '#DDDDDD');
    }
    return FirstBtn;
}

Template.Button.helpers({
    btnName: function() {
        return getFirstBtn(this.class).buttonName();
    },
    btnClass: function() {
        return getFirstBtn(this.class).buttonClass();
    },
    btnStyle: function() {
        return getFirstBtn(this.class).buttonStyle();
    }
});

补充：我强烈建议您在onCreated 中创建此按钮并将其存储在模板实例本身中。稍后您可以通过这样的助手引用它：例如Template.instance().FirstBtn.buttonName()。

【讨论】：

谢谢！它工作得很好。我会调整您的“添加”建议！
很抱歉，我还有一个问题。在onCreated 中创建按钮时如何添加this.class？在onCreated中，我不能使用this.class，但是，我只能在helpers中使用this.class
使用this.data.class