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，隐藏＆＃34;加载...＆＃34; para，并在结果中显示结果。

结果显示正确。我的问题是＆＃34;加载......＆＃34;只会隐藏在最顶级的foo上。不是其他的。

我该如何解决这个问题？

修改正如建议而不是，

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

我用过，

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

这也不起作用：）

Answer 1

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

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

Answer 2

我就是这样做的

模板...如果未定义结果，则会渲染其他路径。

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

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

2 个答案: