如何在流星中访问当前模板中的元素？

Question

我有一个这样的模板，

<template name = "foo">
    <p id="loading" >LOADING...</p>
    <p> {{theResult}} </p>
</template>

这就是我创建 foos 的方式，

 // foos = [a, b, c, d]. With each button click I add a new item to the array
 {{#each foos}}
    {{> foo .}}
 {{/each}}

以及 foo 的工作原理，

Template.foo.created = function(){
    var name = Template.currentData();
    api_call(name, function(err, result){
        Session.set(name, result);
    }); 
}  

Template.foo.helpers({
        'theResult': function(){
            var name = Template.currentData();
            if(Session.get(name)) {
                $("#loading").hide();
                return Session.get(name);
            } else {
                return "";
            }
        }
    })

所以我的期望是当数据来自 api_call 时，隐藏“LOADING...”参数，并在结果中显示结果。

结果显示正确。我的问题是“正在加载...”仅隐藏在最顶层的 foo 上。不是其他的。

我该如何解决这个问题？

编辑： 正如建议的那样，

$("#loading").hide();

我用过，

Template.instance().$("#loading").hide();

这也没有用:)

Answer 1

我就是这样做的

模板...如果未定义theResult，将呈现else路径。

<template name="foo">
    {{#with theResult}}<p> {{this}} </p>
    {{else}}<p id="loading" >LOADING...</p>
    {{/with}}
</template>

Javascript...theResult 是一个简单的 Session.get 调用

Template.foo.helpers({
    theResult: function(){
        var name = Template.currentData();
        return name && Session.get(name);
    }
});

Answer 2

感谢 Meteor 模板引擎，您可以访问模板范围的 jQuery 对象，该对象只会返回相应模板中的元素。

Template.foo.helpers({
  'someText': function(){
    var template = Template.instance();
    template.$('p').changeSomeattr();
    return Session.get('myPara');
  }
});