如何在 JavaScript 助手中只声明一个变量一次？

Question

我正在使用 meteor-blaze 开发 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 一次。

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

我该怎么做？

Answer 1

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()。

Answer 2

您应该将您的变量放在模板实例中，并使用 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 文档推荐的一个好习惯。

如何在 JavaScript 助手中只声明一个变量一次？

How to declare a variable only one time in JavaScript helpers?

javascript

variables

helper

meteor

meteor-blaze