【问题标题】:Set a Variable Scope to Template in Meteor.js在 Meteor.js 中将变量范围设置为模板
【发布时间】:2013-12-06 10:59:00
【问题描述】:

是否可以创建一个范围为模板的变量?该变量可以在模板中的不同助手之间共享,但不存在于模板之外。

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

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

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

【问题讨论】:

    标签: javascript node.js meteor


    【解决方案1】:

    如果其他人偶然发现这一点并且正在使用 Meteor 1.0,那么您可以通过以下方式实现这一点。

    Template.name.onCreated(function(){
        this.data.variableName = "something";
    });
    
    Template.name.helpers({
        'helper' : function() {
            return Template.instance().data.variableName;
        }
    });
    

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

    编辑:

    因此,这对于嵌套在另一个模板中的模板非常有效,但对于父模板则效果不佳。 data 属性没有保存值,因此我进行了更多研究,并在 Template.onCreated 的示例中发现 this 他们有 this.highlightedPicture = new ReactiveVar(null); ,因此显然可以在模板实例上定义新属性。我在这两种情况下都试过了,它适用于Template.instance()

    【讨论】:

    • this.dataofficial doc 的只读权限。
    • 嗨 Shaded,我确实偶然发现了这一点(Meteor 现在是 1.2.1),并希望您为我找到解决方案,但担心事情发生了变化,或者您没有正确记录解决方案 -基本上,您需要删除对 .data 的所有引用,只需将变量附加到模板本身 - 请参阅 dweldon.silvrback.com/scoped-reactivity,了解如何使其工作的非常好的且易于理解的示例。
    【解决方案2】:

    为什么不使用

    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)
        }
    })
    

    您的私人_someVariable 不是反应式的,它在这种情况下用作选项。但是您可以包装 Deps.Dependency() 来获取私有响应式模板的变量

    【讨论】:

    • 助手不起作用 - 助手具有全局范围。
    • 啊啊啊,你是对的!难道我们没有办法为它的任何助手绑定模板实例吗?
    • 执行此操作的方法是将参数从 HTML 传递给帮助程序。所以真的,一旦你需要做这种事情,你可能应该将你的模型抽象成类。
    【解决方案3】:

    来自文档:http://docs.meteor.com/#namespacing

    只需用 var 声明它,它将是文件范围。如果没有 var,它将是全局范围。

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

    【讨论】:

      【解决方案4】:

      我在使用 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】:

        您可以在onCreated 中将其创建为反应变量,然后在帮助程序中返回该变量。无论您在哪里set 那个变量,它都会自动更新助手值。这是一个例子:

        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());
            }
        });
        

        现在您可以在模板中的任何位置调用{{yourVar}} 并按上述方式编辑它的值。

        【讨论】:

          猜你喜欢
          • 2013-09-01
          • 1970-01-01
          • 1970-01-01
          • 2022-12-18
          • 2022-12-01
          • 2014-06-27
          • 1970-01-01
          • 2016-11-25
          • 1970-01-01
          相关资源
          最近更新 更多