Question

我正在使用meteor-fire开发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实例中，并使用 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助手中只声明一次变量？

2 个答案: