在ext .js中为模板设置一个变量作用域

时间:2021-07-14 17:28:22

Is it possible to create a variable that is scoped to a template? This variable can be shared among the different helpers in the template, but does not exist outside of the template.

是否可以创建作用域到模板的变量?此变量可以在模板中的不同helper之间共享,但在模板之外不存在。

In this example below, how can game variable be shared between the 2 templates without repeating its definition? Initializing it using var makes it global which is not what I want. Thank you!

在下面的示例中,如何在两个模板之间共享game变量而不重复其定义?使用var初始化它使它成为全局的,这不是我想要的。谢谢你!

Template.userInfo.game = function() {
    var game = 'Angry Bird';
    return game + ' game';
};

Template.userInfo.score = function() {
    var game = 'Angry Bird';
    return game + ' score';
};

5 个解决方案

#1


7  

If anyone else stumbles across this and is using Meteor 1.0, here's how you can achieve this.

如果有人偶然发现并使用了“流星1.0”,你可以这样做。

Template.name.onCreated(function(){
    this.data.variableName = "something";
});

Template.name.helpers({
    'helper' : function() {
        return Template.instance().data.variableName;
    }
});

This way the variable is scoped to the instance of the template that was created. I have a page that uses multiple instance of the same template so this was very useful.

这样,变量就作用于创建的模板的实例。我有一个页面,它使用同一个模板的多个实例,所以这个非常有用。

EDIT:

编辑:

So this worked perfectly for templates nested inside another template, but didn't work so well with the parent template. The data property wasn't holding values so I did some more research and found this in the example for Template.onCreated they have this.highlightedPicture = new ReactiveVar(null); so apparently it's fine to define new properties on your Template instance. I tried this in both scenarios and it works great with Template.instance().

因此,这对于嵌套在另一个模板中的模板非常有效,但是对于父模板就不那么有效了。数据属性没有保存值,所以我做了更多的研究,在Template的示例中发现了这一点。oncreate他们。highlightedPicture = new ReactiveVar(空);因此,显然可以在模板实例上定义新的属性。我在这两种场景中都尝试过了,它在Template.instance()中效果很好。

#2


3  

Why don't use

为什么不使用

Template.foo.created = function() {
    this._someVariable = "some value"
}

Template.foo.someHelper = function() {
    return this._someVariable
}

Template.foo.events({
    "click #mylink": function(event, tmpl) {
        console.log(tmpl._someVariable)
    }
})

Your private _someVariable is not reactive it serves for options in this case. But you can wrap a Deps.Dependency() to get a private reactive Template's variables

您的private _someVariable不是被动的,它在这种情况下为选项服务。但是您可以包装一个Deps.Dependency()来获得一个私有的反应模板的变量。

#3


2  

From the docs: http://docs.meteor.com/#namespacing

从文档:http://docs.meteor.com/命名空间

Just declare it with a var and it will be file scope. Without the var it will be global scope.

只需将其声明为var,它将是文件范围。没有var,它将是全局范围。

var game = 'Angry Bird'; // File scope.
game2 = 'Angry Bird'; // App scope.

#4


0  

I had some issue to use autorun and variable scope, so maybe it will help someone :

我有一些问题要使用autorun和可变范围,所以它可能会帮助一些人:

Template.foo.someHelper = function() {
     return this._someVariable
}

Template.foo.events({
     "click #mylink": function(event, tmpl) {
          console.log(tmpl._someVariable)
      }
})
Template.foo.onRendered(function() {
      this._someVariable = "some value"
      this.autorun(function(templateInstance) {
            Collection.find({}).fetch(); // Autorun will be executed each time this collection has change (update, delete, insert)
            console.log(templateInstance._someVariable);
      }, this.templateInstance());
});

#5


0  

You could create it as a reactive var in the onCreated then return that variable in a helper. Wherever you set that variable it will automatically update the helper value. Here's an example:

您可以在oncreate中将它创建为一个反应式var,然后在helper中返回该变量。无论您在何处设置该变量,它都将自动更新helper值。这里有一个例子:

Template.foo.onCreated(function() {
    this.yourVar = new ReactiveVar("");
    this.yourVar.set("initValue");
});

Template.foo.helpers({
    yourVar(){
        return Template.instance().yourVar.get();
    }
});

Template.foo.events({
    'click .btn': function (event) {
        template.yourVar.set($(event.target).val());
    }
});

Now you can call {{yourVar}} anywhere in your template and edit it's value as above.

现在,您可以在模板的任何地方调用{yourVar}并编辑它的值。

#1


7  

If anyone else stumbles across this and is using Meteor 1.0, here's how you can achieve this.

如果有人偶然发现并使用了“流星1.0”,你可以这样做。

Template.name.onCreated(function(){
    this.data.variableName = "something";
});

Template.name.helpers({
    'helper' : function() {
        return Template.instance().data.variableName;
    }
});

This way the variable is scoped to the instance of the template that was created. I have a page that uses multiple instance of the same template so this was very useful.

这样,变量就作用于创建的模板的实例。我有一个页面,它使用同一个模板的多个实例,所以这个非常有用。

EDIT:

编辑:

So this worked perfectly for templates nested inside another template, but didn't work so well with the parent template. The data property wasn't holding values so I did some more research and found this in the example for Template.onCreated they have this.highlightedPicture = new ReactiveVar(null); so apparently it's fine to define new properties on your Template instance. I tried this in both scenarios and it works great with Template.instance().

因此,这对于嵌套在另一个模板中的模板非常有效,但是对于父模板就不那么有效了。数据属性没有保存值,所以我做了更多的研究,在Template的示例中发现了这一点。oncreate他们。highlightedPicture = new ReactiveVar(空);因此,显然可以在模板实例上定义新的属性。我在这两种场景中都尝试过了,它在Template.instance()中效果很好。

#2


3  

Why don't use

为什么不使用

Template.foo.created = function() {
    this._someVariable = "some value"
}

Template.foo.someHelper = function() {
    return this._someVariable
}

Template.foo.events({
    "click #mylink": function(event, tmpl) {
        console.log(tmpl._someVariable)
    }
})

Your private _someVariable is not reactive it serves for options in this case. But you can wrap a Deps.Dependency() to get a private reactive Template's variables

您的private _someVariable不是被动的,它在这种情况下为选项服务。但是您可以包装一个Deps.Dependency()来获得一个私有的反应模板的变量。

#3


2  

From the docs: http://docs.meteor.com/#namespacing

从文档:http://docs.meteor.com/命名空间

Just declare it with a var and it will be file scope. Without the var it will be global scope.

只需将其声明为var,它将是文件范围。没有var,它将是全局范围。

var game = 'Angry Bird'; // File scope.
game2 = 'Angry Bird'; // App scope.

#4


0  

I had some issue to use autorun and variable scope, so maybe it will help someone :

我有一些问题要使用autorun和可变范围,所以它可能会帮助一些人:

Template.foo.someHelper = function() {
     return this._someVariable
}

Template.foo.events({
     "click #mylink": function(event, tmpl) {
          console.log(tmpl._someVariable)
      }
})
Template.foo.onRendered(function() {
      this._someVariable = "some value"
      this.autorun(function(templateInstance) {
            Collection.find({}).fetch(); // Autorun will be executed each time this collection has change (update, delete, insert)
            console.log(templateInstance._someVariable);
      }, this.templateInstance());
});

#5


0  

You could create it as a reactive var in the onCreated then return that variable in a helper. Wherever you set that variable it will automatically update the helper value. Here's an example:

您可以在oncreate中将它创建为一个反应式var,然后在helper中返回该变量。无论您在何处设置该变量,它都将自动更新helper值。这里有一个例子:

Template.foo.onCreated(function() {
    this.yourVar = new ReactiveVar("");
    this.yourVar.set("initValue");
});

Template.foo.helpers({
    yourVar(){
        return Template.instance().yourVar.get();
    }
});

Template.foo.events({
    'click .btn': function (event) {
        template.yourVar.set($(event.target).val());
    }
});

Now you can call {{yourVar}} anywhere in your template and edit it's value as above.

现在,您可以在模板的任何地方调用{yourVar}并编辑它的值。